Your Browser Don't Support Canvas, Please Download Chrome ^_^``

Intro

ACM JUIT and TIED Cell- The E-Cell of JUIT presents #CodeWithCoffee - A series of weekly challenges to improve Development Skills of JUITians.

Every week we will release a problem statement along with the necessary learning resources. At the end of the week, we will meet and discuss the solution and any problems faced. This will be accompanied by hands on Sessions or Tutorials.

Through this series, you will get to learn Frontend, Backend, Server Handling, Android, Machine Learning, DataScience, AR/VR and much more. Check out the awesome tasks for this week.

Tasks

Front End Challenge

Aki wants to plan the first ever developers meetup in JUIT. As plannings stack up, he thinks that a todo list app might help him manage the event better.
He thinks of developing a simple ToDo List App. Now he has nothing created but only plans and requirements. But he lacks the skills for developing it. Since he has a lot of work to do for successfully organizing the developers meet over coffee in hackerden, he can't learn the required skills so soon.
You may develop the solutions in groups.

Task 1

Help Aki by developing a simple frontend for ToDo list app.

Level 0 - Easy - Let's Get Started!

First things first! We need to set up the project.
Create a folder called todo and open this within your text editor. We need an html file, a css file and a JS file for this project.
Go ahead and create those!

Level 1 - Easy - Basic HTML tags and CSS properties.

Level 1 (HTML basics) There you go! You've created your files, now let's do some work now! Open your html file and do the following:
1.Create a web page with the title CodeWithCoffee ToDo App.
2.Add a CodeWithCoffee logo and a heading for the same. (Center Aligned)
3.Create a link at the bottom named 'how to use' to another page titled 'Instructions'.
4.Instructions page:

(i) Add logo and heading
(ii) Write a paragraph describing how to use the web app.You can also use ordered list for the same.
(iii) Create a link named 'back' to get back to the app.

FeaturesType Requirements Description
Title HTML NA Title shoud be CodeWithCoffee ToDo App
Logo & Heading HTML Center aligned You should add Codewithcoffee Logo and a heading for the same.
Links HTML Opens in new tab Add a new page named instruction.html and add to your home page.
Style Sheet CSS main.css This will be the main CSS file.
Images Links Add images as links Do not add images in root dir

Level 2 - Easy - Basic CSS and meta tags.

Well done with html! You've had a great start, but the app still looks dull. It's time you customize it! Open the CSS file and do the following:

1.Create a style sheet customising your Web page setting font style, background colour, font color, margins etc., of your choice.
2.Include the reference of this file in your html file, i. e. link this file to your html file.
3.Insert viewport meta tags.

Features Type Requirements Description
Add Meta Tags HTML NA Add few meta tags for some info.
Logo & Heading HTML Center aligned You should add Codewithcoffee Logo and a heading for the same.
Background Color CSS Dark colour Keep dark background for the app.
Font CSS font-family: Helvetica, arial, sans-serif; Keep appropriate font size.

Level 3 - Javascript Basics.

Nice work with the app till now, but the app still lacks functionality. So now let's add some basic functions to the " ToDo App ". Now, Aki has to figure out what functionalities he needs in the app. After a lot of brainstorming, Aki has decided that his " ToDo App " must have the following capabilities:

1.He can add an item to the list.
2.Mark the items as Done.
3.Remove an item from the list.

Open the scripts.js file and add the following:
1.Write code to create a new list item on clicking the add button.
2.Write a function to strikethrough the item when clicked.(hint:use html tag)
3.Append a close button to all the list items.
4.Write a function to remove the item when the close button is clicked.


Stay tuned to Front End Challenge GitHub Repository for further updates.

About

TIEDC

The Entrepreneurship Cell (TIEDC) of JUIT also known as Technology Incubation & Entrepreneurship Cell of Jaypee University of Information Technology, is a student-run organisation that has been established with the objective of:

  • Creating, fostering and promoting the spirit of entrepreneurship
  • Developing the entrepreneurial skill set of the community
  • Providing consultancy to budding entrepreneurs in their entrepreneurial journeys

ACM JUIT

The Association for Computing Machinery (ACM) is an international learned society for computing. The ACM-JUIT is the Student Chapter in JUIT with its core focus areas in the field of computing, networking, education and technological innovations. The student chapter is focused on a wide range of ACM activities like encouraging students to take an active interest in the emerging and exciting world of computing and facilitating the members by providing guidance in their field of interest.

Register

Registration is absolutely free. Register yourself here to participate in CodeWithCoffee