Dinner Planner
Now Plan Your Dinner Online
Client
KTH Royal Institute of TechnologyServices
Front-End Development, PrototypingTools
HTML, CSS, JavaScript, React.js
Aim
Implementing and developing the prototype for Dinner Planning application. The dishes need to be embedded in the code so that be filtered based on their type and preparation.
Solution
The dinner planner application was developed with the help of HTML, CSS and JavaScript. All the dishes were embedded using the API’s in the code and using method the dishes are filtered based in their type like starter, main course, desert. Also the preparation steps were available for the dishes with get altered based on the number of guests that you enter into the application.
My Role
Belonging to the design background, my role was to develop the front-end using the HTML, CSS, Bootstrap and JavaScript for funtioning of the application. The same design was replicated using react.js. Below you can find some code for the same.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dinner planner</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Dinner planner</h1>
<div id="exampleView">
<div>
Number of guests: <span id="numberOfGuests"></span>
</div>
<div>
<button id="minusGuest" class="btn"><span class="glyphicon glyphicon-minus"></span></button>
<button id="plusGuest" class="btn"><span class="glyphicon glyphicon-plus"></span></button>
</div>
</div>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Bootstrap JavaScript, needed if you want for instance tabs, models, popovers etc. -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<!-- The application JavaScript code -->
<script src="js/app.js"></script>
<script src="js/model/dinnerModel.js"></script>
<script src="js/view/exampleView.js"></script>
<!-- TODO: Here you should include JS code for your other views -->
</body>
</html>Github
Please find below the link to Github repository.
