<p>A weather app allows the user to look up weather information for a specific location. Usually information such as temperature (Celsius &amp; Fahrenheit), weather description, wind speed, daily and 5 day forecast is provided to the user. Building a weather application is a good beginner application that teaches you how to fetch data from an API and display it to the user.</p><h3>User Stories</h3><ul><li><p>Display an input field to search for a city.</p></li><li><p>Display weather information including:</p><ul><li><p>City and country name</p></li><li><p>Temperature (Celsius and Fahrenheit)</p></li><li><p>Weather description (sunny, rainy, windy etc...)</p></li></ul></li><li><p>Input field should have validation. For example, user should not be able to perform a search if the input field is empty!</p></li></ul><h3>Bonus Features</h3><ul><li><p>Display weather information for user's current location.</p></li><li><p>Display city location on a map (Google Maps, Mapbox).</p></li><li><p>Display 5 day forecast.</p></li><li><p>Save a city location to a favorites list.</p></li></ul><h2>Useful Links and Resources</h2><ul><li><p><a target="_blank" href="https://openweathermap.org/">Openweathermap API</a></p></li><li><p><a target="_blank" href="https://developers.google.com/maps">Google Maps API</a></p></li><li><p><a target="_blank" href="https://www.mapbox.com/">Mapbox API</a></p></li></ul><h5>Example Projects</h5><ul><li><p><a target="_blank" href="https://rickywid.github.io/weather-v2">Weather App</a></p></li><li><p><a href="https://esnz-reactweather.netlify.app/">react-weather-app</a></p></li></ul>

A weather app allows the user to look up weather information for a specific location

Weather App

<p>Generate passwords based on certain characteristics selected by the user.</p><h2>User Stories</h2><ul><li><p>User can select the length of the generated password</p></li><li><p>User can select one or multiple of the following: <em>Include uppercase letters</em>, <em>Include lowercase letters</em>, <em>Include numbers</em>, <em>Include symbols</em></p></li><li><p>By clicking the <em>Generate password</em> button, the user can see a password being generated</p></li><li><p>User can click a <em>Copy to clipboard</em> button which will save the password to the clipboard</p></li></ul><h2>Bonus features</h2><ul><li><p>User can see the password strength</p></li></ul><h2>Useful links and resources</h2><ul><li><p><a target="_blank" href="https://github.com/dropbox/zxcvbn">Password strength checked - zxcvbn</a></p></li></ul><h2>Example projects</h2><ul><li><p><a target="_blank" href="https://codepen.io/FlorinPop17/full/BaBePej">Password Generator by Florin Pop on Codepen</a></p></li><li><p><a target="_blank" href="https://passwordsgenerator.net">PasswordGenerator</a></p></li></ul>

Generate passwords based on certain characteristics selected by the user.

Password Generator

<p>Flashcards are a time tested technique used by students to review and test their knowledge on a particular subject.</p><p>This app is based on a knowledge base of questions and answers about a particular subject and randomly displays a card with the question and multiple answers. The objective is for the user to select the correct answer(s).</p><h2>User Stories</h2><ul><li><p>User can see a single card, randomly picked from the "deck" displayed at any point in time</p></li><li><p>User can see a question on the card and a list of four possible answers, each of which is identified by a letter.</p></li><li><p>User can select an answer by clicking on it</p></li><li><p>User can see an error displayed when the wrong answer is selected</p></li><li><p>User can see a congratulations message when the correct answer is selected.</p></li><li><p>User can click a 'Next Question' button to display the next flash card.</p></li></ul><h2>Additional Info for the Developer</h2><ul><li><p>For this app the knowledge base of questions and answers should be encoded in a JavaScript object.</p></li><li><p>The possible answers display on each card should be randomly chosen from other flashcards.</p></li></ul><h2>Bonus features</h2><ul><li><p>User can click a 'Results' button to display the tallies of correct and incorrect answers.</p></li><li><p>User can click a 'Reset' button to reset the tallies of correct and incorrect answers.</p></li><li><p>User can click a 'Shuffle' button to re-randomize the "deck"</p></li><li><p>User can click a 'More Info' button to flip the flash card to see additional information. For example, detailed information about the subject of the question on the front of the card.</p></li></ul><h2>Useful links and resources</h2><p><a target="_blank" href="https://developer.mozilla.org/en-US/">MDN</a></p><h2>Example projects</h2><p><a target="_blank" href="https://codepen.io/NinoLopezTech/pen/vJBMpZ">Vintage Multiplication Flash Cards</a></p>

Flashcards are a time tested technique used by students to review and test their knowledge on a particular subject.

Flashcards

<p>The Pomodoro Technique is a time management method developed by Francesco Cirillo in the late 1980s. The technique uses a timer to break down work into intervals, traditionally 25 minutes in length, separated by short breaks - 5 minutes.</p><h2>User Stories</h2><ul><li><p>User can see a timer for 25 minutes - the <strong>working</strong> session</p></li><li><p>After the <strong>working</strong> session is over, the User can see a timer for 5 minutes - the <strong>break</strong> session</p></li><li><p>User can <em>start</em> / <em>pause</em>, <em>stop</em> and <em>reset</em> the timers</p></li></ul><h2>Bonus features</h2><ul><li><p>User can hear a sound playing when the timer hits <em>00:00</em> - denoting that the session has ended</p></li><li><p>User can change / customize the minutes in both sessions before starting</p></li><li><p>User can set a <strong>long break</strong> session of 10 minutes. This will be activated every 4th <strong>break</strong> session</p></li></ul><h2>Useful links and resources</h2><ul><li><p>More about the <a target="_blank" href="https://en.m.wikipedia.org/wiki/Pomodoro_Technique">Pomodoro Technique</a></p></li></ul><h2>Example projects</h2><ul><li><p><a target="_blank" href="https://codepen.io/JoeWeaver/pen/bLbbxK">Joe Weaver's example</a></p></li><li><p><a target="_blank" href="https://codepen.io/freeCodeCamp/full/XpKrrW">FreeCodeCamp Pomodoro Clock example</a></p></li><li><p><a target="_blank" href="https://github.com/amitmerchant1990/pomolectron">A desktop pomodoro app for menubar/tray.</a></p></li><li><p><a target="_blank" href="https://srd-pomodoro-timer.netlify.com/">Sheri Richardson's example</a></p></li></ul>

The Pomodoro Technique is a time management method developed by Francesco Cirillo in the late 1980s.

Pomodoro Clock

<p>An electronic calculator is typically a portable electronic device used to perform calculations, ranging from basic arithmetic to complex mathematics. In this problem you will create a calculator that supports basic arithmetic calculations on integers.</p><h2>Constraints</h2><p>Do not use the <code>eval()</code> function to execute calculations</p><h2>User Stories</h2><ul><li><p>User can see a display showing the current number entered or the result of the last operation.</p></li><li><p>User can see an entry pad containing the following buttons:</p><ul><li><p>Digits 0-9</p></li><li><p>Operations (addition, subtraction, multiplication, division)</p></li><li><p>Equal</p></li><li><p>AC</p></li></ul></li><li><p>User can click on an operation button to display the result of that operation on:</p><ul><li><p>the result of the preceding operation and the last number entered OR</p></li><li><p>the last two numbers entered OR</p></li><li><p>the last number entered</p></li></ul></li><li><p>User can click the 'AC' button to clear all internal work areas and to clear the display.</p></li><li><p>User can see 'ERR' if the user tries to divide by 0.</p></li></ul><h2>Bonus features</h2><ul><li><p>User can click a '+/-' button to change the sign of the number that is currently displayed.</p></li><li><p>User can see a decimal point ('.') button on the entry pad to that allows floating point numbers up to 3 places to be entered and operations to be carried out to the maximum number of decimal places entered for any one number.</p></li><li><p>Add a “backspace” button, so the user can undo if they click the wrong number.</p></li><li><p>Add keyboard support.</p></li></ul><h2>Useful links and resources</h2><ul><li><p><a target="_blank" href="https://en.wikipedia.org/wiki/Calculator">Calculator (Wikipedia)</a></p></li><li><p><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Math#arithmetic_operators">JavaScript operators</a></p></li><li><p><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval#Never_use_eval!">eval()</a></p></li></ul><h2>Example projects</h2><ul><li><p><a target="_blank" href="https://codepen.io/giana/pen/GJMBEv">Javascript Calculator</a></p></li><li><p><a target="_blank" href="https://codepen.io/mjijackson/pen/xOzyGX">React Calculator</a></p></li><li><p><a target="_blank" href="https://github.com/x0uter/javascript-calc">Javascript-CALC</a></p></li><li><p><a target="_blank" href="https://github.com/kana800/Side-Projects/tree/master/1-Beginner/calculator">Python Calculator</a></p></li></ul>

An electronic calculator is typically a portable electronic device used to perform calculations, ranging from basic arithmetic to complex mathematics.

Project Ideas

Weather App

Password Generator

Flashcards

Pomodoro Clock

Calculator