Recipe Porject Site

Developer
Koku
Size
11,766 Kb
Views
14,168
  1. Recipe Porject Site Previews
  2. Recipe Porject Site HTML Codes
  3. Recipe Porject Site CSS Codes
  4. Recipe Porject Site JS Codes

How do I make an recipe porject site?

What is a recipe porject site? How do you make a recipe porject site? This script and codes were developed by Koku on 06 November 2022, Sunday.

Recipe Porject Site Previews
IQ Test

Recipe Porject Site - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Recipe Porject Site</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html> <head> <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Signika" rel="stylesheet"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/> </head> <body> <div id="header"> <div id='author'><h2>Koku KUSIAKU</h2></div> <div id='fcclogo'> <a href="https://www.freecodecamp.com"><img src="https://freecodecamp.github.io/design-style-guide/img/freeCodeCamp.svg" alt="FreeCodeCamp logo" ></a> </div> </div> <div id="app"> </div> </body>
</html> <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Recipe Porject Site - Script Codes CSS Codes

body{ margin:0; font-family:'Signika',sans-serif;/* set by default*//
}
#author{ display:inline-block;
}
#author h2{ margin:0; font-weight:normal;
}
#fcclogo{ display:inline-block; float:right;
} #fcclogo img{ margin-top:5px; height:30px; width:auto; }
#header{ color:rgb(255,255,255); background:green; font-size:20px; padding:0 100px;
}
.ingredients{ position:absolute; background:rgba(226, 106, 107,0.8); width:78vw; margin-left:1vw; padding-left:1vw; color:rgb(255,255,255); /* border:2px solid black;*/ overflow:auto; /*margin-right:50px;*/
}
.ingredients button{ font-size:1.5vw; border:none; position:absolute; right:3vw; top:1vw;
background:rgb(255,0,0);
}
.ingredients h2{ display:inline-block; width:80%; border:1px solid black;
}
.ingredients ul { font-size:20px;
}
.menu{ background:rgb(255,255,255); padding:25px 0 25px;
}
.menuList{ width:75vw; margin:0 auto; text-align:center;
}
@media screen and (max-width:600px){ .menuList{ display:none; }
}
.menuItem{ width:15vw; font-size:25px; border:inherit; background:inherit; margin:0 10px;
}
.name{ padding:0; font-size:30px; text-align:center; font-family:'Signika',sans-serif;
}
.pageFooter{ padding:100px 0; background:rgb(51,51,51); color:white; text-align:center;
}
.phone{ margin:15px 0;
}
.recette{ font-size:0; vertical-align:top; /* background:rgb(47, 47, 49);*/ width:18vw; height:25vw; display:inline-block; margin:1vw; /* need to solve the issue with font-size */
}
.recette img{ width:100%; height:auto; border:1px solid rgb(255,255,255); margin-bottom:0; /* border-top-left-radius:5px; border-top-right-radius:5px;*/
}
.recette-list-selection{ margin:0 auto; width:26vw; font-size:2px; tex-align:center; border:1px solid blue;
}
.direction-left, .direction-right{ display:inline-block; vertical-align:top; width:12vw; text-align:center; font-size:2vw; background:rgb(255,255,255); border:1px solid red;
}
.direction-left{ margin-right:1vw;
}
.recette-list-selection p{ display:inline
}
.recette p{ display:table-cell; height:6.5vw; width:18vw; background:rgb(255,255,255); margin:0; font-size:1.5vw; text-align:center; vertical-align:middle; color:rgb(204, 100, 100);
}
.recette-title{ width:100%; border:1px solid rgb(255,255,255); background:rgb(255,255,255);
}
.recetteList{ margin:0 auto; padding-top:35px; width:80vw; height:58vw; border:1px solid red;
}
.recetteSlider{ height:40vw; /*border:1px solid black;*/ margin-top:50px; /*padding-top:230px; padding-bottom:70px;*/ background-image:url('https://images.pexels.com/photos/59100/pexels-photo-59100.jpeg?w=940&h=650&auto=compress&cs=tinysrgb'); background-size:100% auto; overflow:hidden;
text-align:center;
}
.recetteSlider-helper{ height:100%; vertical-align:middle; display:inline-block;
}
.recetteSlider img{ width:auto; height:25vw; vertical-align:middle; /*margin:0 auto;*/ border-radius:5px;
}
.recipeBox{ position:relative; padding-bottom:3vw; background:rgb(119, 136, 153); border:1px solid yellow; /*padding:0 5%;*/
}
/* ****************************************** COMMUNITY SECTION
**********************************************/
.community{ height:32vw; background:rgb(119, 136, 153)
}
.community-wrapper{ height:32vw; width:82vw; font-size:0; /* for inline block whitespace*/ margin:0 auto;
}
.community-button{ margin:0 auto; text-align:center;
}
.community-button button{ height:5vw; font-size:1.5vw; color:rgb(255,255,255); border:none; background:green;
}
.community-image{ width:50vw; height:30vw; display:inline-block; vertical-align:top; overflow:hidden;
}
.community-message{ width:30vw; height:30vw; display:inline-block; vertical-align:top; color:rgb(204, 204, 204); font-size:1.5vw; line-height:25px; background: rgb(0, 153, 153);/*rgb(51, 204, 153);*/
}
.community-image img{ height:auto; width:100%;
}
.community-message p{ margin:0; line-height:2.5vw; padding:3vw 2vw ;
}

Recipe Porject Site - Script Codes JS Codes

"use strict";
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
/*var Recettes =[ { 'name':'recetteName', 'type':'entree', 'ingredients':[{'name':'ingredientOne','quantité':'100'},{'name':'ingredientOne','quantité':'100'}],
'origine':'Iconne', 'instruction':'type de realisation de la recette ' }, { },
]*/
// make sure you revome blanck character before and after it recettes property
// when validating user input for instance
var recettes = [{ name: "Souris d'agneau confite", type: "plat", ingredients: ['4 souris d’agneau', '1 gros oignon', '1 c. à soupe de miel', '1 c. à soupe de thym', '1 c. à soupe de romarin', 'Huile d’olive', 'Sel', 'poivre du moulin'], image: 'http://static.cuisineaz.com/610x610/i122039-souris-d-agneau-confite.jpeg'
}, { name: "Glacage au chocolat parfume", type: "plat", ingredients: ["3 souris d'agneau", '400 g de rigatoni', '200 g de feta', '2 oignons rouges', '3 tomates', "2 gousses d'ail", "1 c.à soupe rase d'origan", "5 c.à soupe d'huile d'olive", "sel", "poivre"], image: 'http://static.cuisineaz.com/610x610/i6689-rigatoni-a-la-calabraise.jpg'
}, { name: "Saumon parfumé à l'érable", type: "plat", ingredients: ['500 ml de eau', '35 g de gros sel', '1 g de poivre en grains', '1/4 citron de zeste de citron', "65 ml de sirop d'érable", "300 g de filet de saumon", "10 ml de huile d'olive"], image: 'http://static.cuisineaz.com/610x610/i90383-saumon-parfume-a-l-erable.jpg'
}, { name: 'Risotto au butternut rôti, romarin et parmesan', type: "plat", ingredients: ['1/2 courge butternut de taille moyenne', "huile d'olive", 'Herbes de Provence', '1/2 oignon', '200 grammes de riz arborio', '750 millilitres de bouillon de légumes', '125 millilitres de vin blanc sec', '125 millilitres de crème légère (+ 3 à 4 c. à soupe)', 'quelques branches de romarin', 'sel', 'poivre', 'parmesan'], image: 'http://static.cuisineaz.com/610x610/i114614-.jpeg'
}, { name: 'Taboulé de chou-fleur', type: "plat", ingredients: ['1/2 chou-fleur', '50 g de noix décortiquées', '50 g de noix de cajou', '60 g de raisins secs', "3 c. à soupe d'huile olive", "1 c. à soupe d'eau de fleur d'oranger", 'sel'], image: 'http://static.cuisineaz.com/610x610/i121918-.jpeg'
}, { name: 'La tatin sablée aux poires', type: "dessert", ingredients: ['8 poires', '1 gousse de vanille', '150 grammes de sucre', '125 grammes de beurre', '2 jaunes d’oeufs', '65 grammes de farine tamisée', '1 pincée de fleur de sel', '1 gramme de levure chimique'], image: 'http://static.cuisineaz.com/610x610/i124245-.jpeg'
}, { name: 'Salade tiède de rapini', type: "entree", ingredients: ['600 g de rapinis', "45 ml de huile d'olive extra vierge", "1/2 citron de citron pressé en jus", "sel"], image: 'http://static.cuisineaz.com/610x610/i71821-salade-tiede-de-rapini.jpg'
}, { name: 'Salade verte et radis à la ciboulette', type: "entree", ingredients: ["200 g de laitue Boston", "20 g de échalotes", "45 g de radis", "45 ml de Vinaigrette Classique", "3 g de ciboulette fraîche", "sel", "poivre"], image: 'http://static.cuisineaz.com/610x610/i69693-salade-verte-et-radis-a-la-ciboulette.jpg'
}];
var imagesUrl = ['http://static.cuisineaz.com/680x357/i92700-poelee-de-veau-aux-carottes-et-oignons.jpg', 'http://static.cuisineaz.com/680x357/i94520-poelee-gambas.jpg', 'http://static.cuisineaz.com/680x357/i30467-salade-de-fruits-de-saison.jpg', 'http://static.cuisineaz.com/680x357/i85399-boeuf-saute.jpg', 'http://static.cuisineaz.com/680x357/i101958-bricks-viande-marocaine.jpg', 'http://static.cuisineaz.com/680x357/i72245-churrasco-aux-quatre-viandes.jpg', 'http://static.cuisineaz.com/680x357/i14880-salade-de-fruits.jpg', ' http://static.cuisineaz.com/680x357/i75205-pate-de-viande-au-persil.jpg', 'http://static.cuisineaz.com/680x357/i93790-risotto-aux-fruits-de-mer.jpg', ' http://static.cuisineaz.com/680x357/i7548-cassolette-de-poissons-et-st-jacques.jpg', ' http://static.cuisineaz.com/680x357/i91662-pain-de-poisson-a-la-macedoine-de-legumes.jpg'];
var Name = function (_React$Component) { _inherits(Name, _React$Component); function Name() { _classCallCheck(this, Name); return _possibleConstructorReturn(this, _React$Component.apply(this, arguments)); } Name.prototype.render = function render() { return React.createElement( "div", { className: "name" }, React.createElement( "h1", null, " Hi KITCHO " ) ); }; return Name;
}(React.Component);
var MenuItem = function (_React$Component2) { _inherits(MenuItem, _React$Component2); function MenuItem() { _classCallCheck(this, MenuItem); return _possibleConstructorReturn(this, _React$Component2.apply(this, arguments)); } MenuItem.prototype.render = function render() { return React.createElement( "button", { className: "menuItem" }, this.props.name ); }; return MenuItem;
}(React.Component);
var MenuList = function (_React$Component3) { _inherits(MenuList, _React$Component3); function MenuList() { _classCallCheck(this, MenuList); return _possibleConstructorReturn(this, _React$Component3.apply(this, arguments)); } MenuList.prototype.render = function render() { var list = ["Accueil", "Entrée", "Plat", "Dessert"]; var menuList = list.map(function (value) { return React.createElement(MenuItem, { name: value }); }); return React.createElement( "div", { className: "menuList" }, menuList ); }; return MenuList;
}(React.Component);
var RecetteSlider = function (_React$Component4) { _inherits(RecetteSlider, _React$Component4); function RecetteSlider(props) { _classCallCheck(this, RecetteSlider); var _this4 = _possibleConstructorReturn(this, _React$Component4.call(this, props)); _this4.state = { /*url:'http://static.cuisineaz.com/680x357/i85399-boeuf-saute.jpg',*/ url: imagesUrl[0], index: 0, recettesNumber: imagesUrl.length }; _this4.urlChange = _this4.urlChange.bind(_this4); return _this4; } RecetteSlider.prototype.urlChange = function urlChange() { this.setState(function (prevState) { if (prevState.index < this.state.recettesNumber - 1) { return { index: prevState.index + 1, url: imagesUrl[prevState.index + 1] }; } else { return { index: 0, url: imagesUrl[0] }; } }); }; RecetteSlider.prototype.componentDidMount = function componentDidMount() { this.timer = setInterval(this.urlChange, 5000); }; RecetteSlider.prototype.componentWillUnmount = function componentWillUnmount() { clearInterval(this.timer); }; RecetteSlider.prototype.render = function render() { return React.createElement( "div", { className: "recetteSlider" }, React.createElement("span", { className: "recetteSlider-helper" }), " ", React.createElement("img", { src: this.state.url, alt: "image unavailable" }) ); }; return RecetteSlider;
}(React.Component);
var Menu = function (_React$Component5) { _inherits(Menu, _React$Component5); function Menu(props) { _classCallCheck(this, Menu); return _possibleConstructorReturn(this, _React$Component5.call(this, props)); } Menu.prototype.render = function render() { return React.createElement( "div", { className: "menu" }, React.createElement(Name, null), React.createElement(MenuList, null), React.createElement(RecetteSlider, null) ); }; return Menu;
}(React.Component);
/* **************************
recette parts
*****/
var Ingredients = function (_React$Component6) { _inherits(Ingredients, _React$Component6); function Ingredients(props) { _classCallCheck(this, Ingredients); var _this6 = _possibleConstructorReturn(this, _React$Component6.call(this, props)); _this6.state = { display: _this6.getInitialiseDisplay }; _this6.getInitialiseDisplay = _this6.getInitialiseDisplay.bind(_this6); _this6.clickClose = _this6.clickClose.bind(_this6); return _this6; } Ingredients.prototype.getInitialiseDisplay = function getInitialiseDisplay() { return this.props.dipslay; }; Ingredients.prototype.componentWillReceiveProps = function componentWillReceiveProps() { if (!this.state.display && this.props.display) { this.setState({ display: this.props.display }); } }; Ingredients.prototype.clickClose = function clickClose() { this.setState({ display: '' }); $('.ingredients').css('height', '0'); }; Ingredients.prototype.render = function render() { var List = this.props.ingredients.map(function (ingredient) { return React.createElement( "li", { key: ingredient }, ingredient ); }); return React.createElement( "div", { className: "ingredients" }, this.state.display && this.props.show && React.createElement( "div", null, " ", React.createElement( "h2", null, this.props.name ), " ", React.createElement( "button", { onClick: this.clickClose }, "Close" ), React.createElement( "ul", null, List ) ) ); }; return Ingredients;
}(React.Component);
var Recette = function (_React$Component7) { _inherits(Recette, _React$Component7); function Recette(props) { _classCallCheck(this, Recette); return _possibleConstructorReturn(this, _React$Component7.call(this, props)); } Recette.prototype.render = function render() { return React.createElement( "div", { className: "recette", id: this.props.name }, React.createElement("img", { src: this.props.recette.image }), React.createElement( "div", { className: "recette-title" }, React.createElement( "p", null, this.props.recette.name, " " ) ) ); }; return Recette;
}(React.Component);
/*******************************************************/
var RecetteList = function (_React$Component8) { _inherits(RecetteList, _React$Component8); function RecetteList(props) { _classCallCheck(this, RecetteList); var _this8 = _possibleConstructorReturn(this, _React$Component8.call(this, props)); _this8.state = { recetteShow: '', ingredientShow: [] }, _this8.recetteClick = _this8.recetteClick.bind(_this8); return _this8; } RecetteList.prototype.recetteClick = function recetteClick(e) { var recetteId = e.target.parentElement.id; // select the recette that has been clicked var recette = document.getElementById(recetteId); var recetteBox = recette.parentElement; // selecting the recette that must be displayed in the ingredients overlayer component var recetteName = recette.children[1].innerText; //element.getElementByTagName() doesn't work !! var ingredientList = recettes.filter(function (recette) { return recette.name === recetteName; })[0].ingredients; // setting the position of the ingredients overlayer in recetteList var recettePosition = recette.getClientRects()[0]; var recetteBoxPosition = recetteBox.getClientRects()[0]; var top = 100 * (Math.abs(recettePosition.top - recetteBoxPosition.top) + 34) / document.documentElement.clientWidth; // adding some style using jquer, height could be fixed in main css, only top value varies here in fact $(".ingredients").css({ 'height': recettePosition.height.toString() + 'px', "top": top.toString() + 'vw' }); // resetting the state of recetteList component, // note that the if statement is not unreachable now as ingredients component when dispalyed ovelays the recette component--> ingredients need a closing tag this.setState({ recetteShow: recetteName, ingredientShow: ingredientList }); /*if(this.state.recetteShow ===recetteName){ this.setState({ recetteShow:'', ingredientShow:[], }) } else { this.setState({ recetteShow:recetteName, ingredientShow:ingredientList, }); }*/ }; RecetteList.prototype.render = function render() { var list = this.props.list.map(function (recette, index) { return React.createElement(Recette, { name: 'recette' + index.toString(), recette: recette, key: recette.name }); }); return React.createElement( "div", { className: "recetteList", onClick: this.recetteClick }, React.createElement( "div", null, list ), React.createElement(Ingredients, { name: this.state.recetteShow, ingredients: this.state.ingredientShow, show: this.state.recetteShow != '', display: true }) ); }; return RecetteList;
}(React.Component);
var RecipeBox = function (_React$Component9) { _inherits(RecipeBox, _React$Component9); function RecipeBox() { _classCallCheck(this, RecipeBox); return _possibleConstructorReturn(this, _React$Component9.apply(this, arguments)); } RecipeBox.prototype.render = function render() { return React.createElement( "div", { className: "recipeBox" }, React.createElement(RecetteList, { list: this.props.list }), React.createElement( "div", { className: "recette-list-selection" }, React.createElement( "div", { className: "direction-left" }, React.createElement( "i", { className: "fa fa-angle-double-left", "aria-hidden": "true" }, " " ), " ", React.createElement( "p", null, "Précédent" ) ), React.createElement( "div", { className: "direction-right" }, React.createElement( "p", null, "Suivant" ), React.createElement("i", { className: "fa fa-angle-double-right", "aria-hidden": "true" }) ) ) ); }; return RecipeBox;
}(React.Component);
var Community = function (_React$Component10) { _inherits(Community, _React$Component10); function Community() { _classCallCheck(this, Community); return _possibleConstructorReturn(this, _React$Component10.apply(this, arguments)); } Community.prototype.render = function render() { var communityElement = React.createElement( "div", { className: "community-wrapper" }, React.createElement( "div", { className: "community-image" }, React.createElement("img", { src: "https://us.123rf.com/450wm/mearicon/mearicon1602/mearicon160200233/54604387-view-from-above-the-table-of-people-eating.jpg?ver=6", alt: "Image not available" }) ), React.createElement( "div", { className: "community-message" }, React.createElement( "p", null, " Transmettez votre savoir culinaire Que vous ayez le niveau d’un candidat de Top Chef ou que vous débutiez en cuisine, rejoignez notre communauté de 630 000 passionnés et partagez vos meilleures recettes. " ), React.createElement( "div", { className: "community-button" }, React.createElement( "button", { type: "submit" }, " Rejoins la communauté" ), " " ) ) ); return React.createElement( "div", { className: "community" }, communityElement ); }; return Community;
}(React.Component);
var PageFooter = function (_React$Component11) { _inherits(PageFooter, _React$Component11); function PageFooter() { _classCallCheck(this, PageFooter); return _possibleConstructorReturn(this, _React$Component11.apply(this, arguments)); } PageFooter.prototype.render = function render() { return React.createElement( "div", { className: "pageFooter" }, React.createElement( "p", null, " Website Built as part of FreeCodeCamp React Project Curriculum" ), React.createElement( "div", { className: "contacts" }, React.createElement( "div", { className: "phone" }, "+44 743 6304 971" ), React.createElement( "div", { className: "email" }, "[email protected]" ) ) ); }; return PageFooter;
}(React.Component);
ReactDOM.render(React.createElement( "div", null, React.createElement(Menu, null), React.createElement(RecipeBox, { list: recettes }), React.createElement(Community, null), React.createElement(PageFooter, null)
), document.getElementById('app'));
Recipe Porject Site - Script Codes
Recipe Porject Site - Script Codes
Home Page Home
Developer Koku
Username KKOKU
Uploaded November 06, 2022
Rating 3
Size 11,766 Kb
Views 14,168
Do you need developer help for Recipe Porject Site?

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!

Koku (KKOKU) Script Codes
Name
Twitch Channel With JQUERY
Slider for stackoverflow
Local weather show
Twitch.tv channels React static
Koku KUSIAKU profile page 2
Smooth scrool of component
Page responsive
Campers LeaderBoard
Rando quote machine
Iframe test
Create amazing marketing copy 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!