Yummy Food App

Developer
Arnelle Balane
Size
4,607 Kb
Views
6,072
  1. Yummy Food App Previews
  2. Yummy Food App HTML Codes
  3. Yummy Food App CSS Codes
  4. Yummy Food App JS Codes

How do I make an yummy food app?

Implementation of original design from https://www.uplabs.com/posts/yummy-food-app. What is a yummy food app? How do you make a yummy food app? This script and codes were developed by Arnelle Balane on 14 October 2022, Friday.

Yummy Food App Previews
IQ Test

Yummy Food App - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Yummy Food App</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Yummy Food App</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Alegreya"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,600"> <link rel="stylesheet" href="main.css"> </head> <body> <main class="screen"> <section class="recipe-overview"> <section class="carousel"> <img class="carousel__image carousel__image--current" src="http://cdn.arnellebalane.com/images/yummy-food-app/01.jpg" alt="Carousel Image"> <img class="carousel__image" src="http://cdn.arnellebalane.com/images/yummy-food-app/02.jpg" alt="Carousel Image"> <img class="carousel__image" src="http://cdn.arnellebalane.com/images/yummy-food-app/03.jpg" alt="Carousel Image"> <img class="carousel__image" src="http://cdn.arnellebalane.com/images/yummy-food-app/04.jpg" alt="Carousel Image"> <img class="carousel__image" src="http://cdn.arnellebalane.com/images/yummy-food-app/05.jpg" alt="Carousel Image"> <img class="carousel__image" src="http://cdn.arnellebalane.com/images/yummy-food-app/06.jpg" alt="Carousel Image"> <img class="carousel__image" src="http://cdn.arnellebalane.com/images/yummy-food-app/07.jpg" alt="Carousel Image"> </section> <header class="recipe"> <h1 class="recipe__title">Drinks in the sun</h1> <span class="recipe__info">4 Servings</span> <span class="recipe__info">10m</span> <p class="recipe__description">Hot days for frosty sips! Try this refreshing drink that will impress all your friends.</p> </header> </section> <div class="recipe-details-wrapper"> <section class="recipe-details"> <svg class="recipe__icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"> <path d="M15.5,21L14,8H16.23L15.1,3.46L16.84,3L18.09,8H22L20.5,21H15.5M5,11H10A3,3 0 0,1 13,14H2A3,3 0 0,1 5,11M13,18A3,3 0 0,1 10,21H5A3,3 0 0,1 2,18H13M3,15H8L9.5,16.5L11,15H12A1,1 0 0,1 13,16A1,1 0 0,1 12,17H3A1,1 0 0,1 2,16A1,1 0 0,1 3,15Z" /> </svg> <h2 class="ingredients-title">Ingredients</h2> <ul class="ingredients"> <li class="ingredient">2 cups rose, divided</li> <li class="ingredient">11/4 cups sugar</li> <li class="ingredient">3 cups frozen raspberries</li> </ul> </section> <button class="like-btn"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"> <path d="M12.1,18.55L12,18.65L11.89,18.55C7.14,14.24 4,11.39 4,8.5C4,6.5 5.5,5 7.5,5C9.04,5 10.54,6 11.07,7.36H12.93C13.46,6 14.96,5 16.5,5C18.5,5 20,6.5 20,8.5C20,11.39 16.86,14.24 12.1,18.55M16.5,3C14.76,3 13.09,3.81 12,5.08C10.91,3.81 9.24,3 7.5,3C4.42,3 2,5.41 2,8.5C2,12.27 5.4,15.36 10.55,20.03L12,21.35L13.45,20.03C18.6,15.36 22,12.27 22,8.5C22,5.41 19.58,3 16.5,3Z"> </svg> </button> </div> </main> <script src="main.js"></script> </body>
</html>
<!-- 365x650 --> <script src="js/index.js"></script>
</body>
</html>

Yummy Food App - Script Codes CSS Codes

*,
*::before,
*::after { box-sizing: border-box;
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100vh; margin: 0; font-family: "Open Sans", sans-serif; font-size: 12px; font-weight: 300; color: #222; background-image: -webkit-linear-gradient(100deg, #a5c0e8 35%, #9cbae6 35%); background-image: linear-gradient(-10deg, #a5c0e8 35%, #9cbae6 35%);
}
/** App Screen **/
.screen { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 365px; height: 650px; background-color: #fff; overflow: hidden; --primary-color: #faaaa1;
}
/** Blocks **/
.recipe-overview { -ms-flex-negative: 0; flex-shrink: 0; padding-bottom: 80px; position: relative; z-index: 1; background-color: var(--primary-color); -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), 0 100%); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), 0 100%); -webkit-transition: background-color 200ms ease; transition: background-color 200ms ease;
}
.recipe-details-wrapper { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; padding-top: 20px; margin-top: -80px; position: relative;
}
.recipe-details { width: 200%; padding: 70px 45px 30px 80px; position: relative; overflow: auto;
}
.recipe-details::-webkit-scrollbar { width: 3px;
}
.recipe-details::-webkit-scrollbar-thumb { background-color: var(--primary-color);
}
/** Carousel **/
.carousel { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 20px calc((100% - 200px) / 2); overflow: hidden;
}
.carousel__image { width: 200px; height: 270px; border-radius: 3px; cursor: pointer; -webkit-transition: -webkit-transform 200ms ease; transition: -webkit-transform 200ms ease; transition: transform 200ms ease; transition: transform 200ms ease, -webkit-transform 200ms ease;
}
.carousel__image:not(.carousel__image--current) { opacity: 0.5; -webkit-transform: scale(0.8); transform: scale(0.8);
}
.carousel__image--current { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
/** Recipe **/
.recipe { padding: 0 60px 0 30px;
}
.recipe__title { font-family: "Alegreya", serif; font-size: 2.6em; margin: 0;
}
.recipe__info { display: inline-block; margin: 0.75em 0; font-weight: bold; line-height: 16px;
}
.recipe__info:not(:last-of-type) { margin-right: 5px;
}
.recipe__description { margin: 0;
}
.recipe__icon { width: 40px; height: 40px; position: absolute; top: 70px; left: 25px; fill: var(--primary-color); -webkit-transition: fill 200ms ease; transition: fill 200ms ease;
}
/** Ingredients **/
.ingredients-title { margin: 0; font-size: inherit;
}
.ingredients { padding: 0; margin: 0; list-style: none;
}
.ingredient { padding: 1em 0;
}
.ingredient:not(:last-child) { border-bottom: 2px dotted #ddd;
}
/** Like Button **/
.like-btn { width: 50px; height: 50px; border: 0; position: absolute; top: 0; right: 20px; z-index: 2; font-size: 0; border-radius: 50%; background-color: #fff; box-shadow: 0 1px 5px var(--primary-color); -webkit-transition: box-shadow 200ms ease, -webkit-transform 200ms ease; transition: box-shadow 200ms ease, -webkit-transform 200ms ease; transition: box-shadow 200ms ease, transform 200ms ease; transition: box-shadow 200ms ease, transform 200ms ease, -webkit-transform 200ms ease; cursor: pointer; outline: none;
}
.like-btn:active { -webkit-transform: scale(0.9); transform: scale(0.9);
}
.like-btn path { fill: var(--primary-color); -webkit-transition: fill 200ms ease; transition: fill 200ms ease;
}

Yummy Food App - Script Codes JS Codes

const carousel = (function() { const element = document.querySelector('.carousel'); const items = Array.from(element.querySelectorAll('.carousel__image')); const itemWidth = 200; const currentItemClass = 'carousel__image--current'; let index = 0; function render(index) { items.forEach((item, i) => { const transforms = [`translateX(-${itemWidth * index}px)`]; if (item.classList.contains(currentItemClass)) { item.classList.remove(currentItemClass); } if (index === i) { item.classList.add(currentItemClass); } else { transforms.push('scale(0.8)'); } item.style.transform = transforms.join(' '); }); } function previous() { if (index > 0) { render(--index); } return index; } function next() { if (index < items.length - 1) { render(++index); } return index; } return { render, previous, next };
})();
const data = [{ color: '#faaaa1', name: 'Drinks in the sun', description: 'Hot days for frosty sips! Try this refreshing drink that will impress all your friends.'
}, { color: '#f8cf8b', name: 'Fresh Veggies', description: 'Crunchy and savory, best served with a glass of something cold in good company'
}, { color: '#bbd686', name: 'Drinks in the sun', description: 'Hot days for frosty sips! Try this refreshing drink that will impress all your friends.'
}, { color: '#788585', name: 'Fresh Veggies', description: 'Crunchy and savory, best served with a glass of something cold in good company'
}, { color: '#508aa8', name: 'Drinks in the sun', description: 'Hot days for frosty sips! Try this refreshing drink that will impress all your friends.'
}, { color: '#f8cf8b', name: 'Fresh Veggies', description: 'Crunchy and savory, best served with a glass of something cold in good company'
}, { color: '#faaaa1', name: 'Drinks in the sun', description: 'Hot days for frosty sips! Try this refreshing drink that will impress all your friends.'
}];
document.querySelector('.carousel').addEventListener('click', function(e) { const target = e.target; const currentClass = 'carousel__image--current'; if (target.classList.contains('carousel__image') && !target.classList.contains(currentClass)) { const previous = target.previousElementSibling; const next = target.nextElementSibling; if (previous && previous.classList.contains(currentClass)) { var index = carousel.next(); } else if (next && next.classList.contains(currentClass)) { var index = carousel.previous(); } const item = data[index]; document.querySelector('.screen').style.setProperty('--primary-color', item.color); document.querySelector('.recipe__title').textContent = item.name; document.querySelector('.recipe__description').textContent = item.description; }
});
Yummy Food App - Script Codes
Yummy Food App - Script Codes
Home Page Home
Developer Arnelle Balane
Username arnellebalane
Uploaded October 14, 2022
Rating 3
Size 4,607 Kb
Views 6,072
Do you need developer help for Yummy Food App?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Arnelle Balane (arnellebalane) Script Codes
Name
Pixel mario
Day 77 - Choose Category
Running pixel mario
Virtual Filesystem
Day 11 - Calendar Card
Day 60 - Knob
Day 85 - Cinema Application
Day 48 - Speedometer
Day 78 - TV UI - Player Card
Day 41 - File Upload Widget
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!