.github/PULL_REQUEST_TEMPLATE.md

@@ -1,5 +1,5 @@
 # Pull Request
-Compile all the informations written below to send a legitimate pull request to the repository!
+Compile all the information written below to send a legitimate pull request to the repository!
 
 ## Label:
 

CHANGELOG.md

@@ -1,77 +1,133 @@
 # Changelog
 All notable changes to this project will be documented in this file.  
-
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) with some edits,
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).  
- 
 
-## 🎉 1.8.0
+# 1.17.0
+
+## What's Changed
+* feat(fedl): add drum machine project by @Airscripts in https://github.com/Airscripts/campfire/pull/45
+
+**Full Changelog**: https://github.com/Airscripts/campfire/compare/1.16.0...1.17.0
+
+# 1.16.0
+
+## What's Changed
+* feat(fedl): add random quote machine project by @elgorditosalsero in https://github.com/Airscripts/campfire/pull/44
+
+**Full Changelog**: https://github.com/Airscripts/campfire/compare/1.15.0...1.16.0
+
+# 1.15.0
+
+## What's Changed
+* feat(fedl): add markdown previewer project by @elgorditosalsero in https://github.com/Airscripts/campfire/pull/41
+
+**Full Changelog**: https://github.com/Airscripts/campfire/compare/1.14.0...1.15.0
+
+# 1.14.0
+
+## What's Changed
+* feat(fedl): add clock project by @elgorditosalsero in https://github.com/Airscripts/campfire/pull/43
+
+### New Contributors
+* @elgorditosalsero made their first contribution in https://github.com/Airscripts/campfire/pull/43
+
+**Full Changelog**: https://github.com/Airscripts/campfire/compare/1.13.0...1.14.0
+
+# 1.13.0
+
+## What's Changed
+* feat(fedl): add javascript calculator project by @Airscripts in https://github.com/Airscripts/campfire/pull/40
+
+**Full Changelog**: https://github.com/Airscripts/campfire/compare/1.12.0...1.13.0
+
+# 1.12.0
+
+## What's Changed
+* feat(bedaa): add cash register project by @Airscripts in https://github.com/Airscripts/campfire/pull/39
+
+**Full Changelog**: https://github.com/Airscripts/campfire/compare/1.11.0...1.12.0
+
+# 1.11.0
+
+## What's Changed
+* feat(bedaa): add request header parser microservice project by @Airscripts in https://github.com/Airscripts/campfire/pull/38
+
+**Full Changelog**: https://github.com/Airscripts/campfire/compare/1.10.0...1.11.0
+
+# 1.10.0
+
+## What's Changed
+* feat(bedaa): add timestamp microservice project by @Airscripts in https://github.com/Airscripts/campfire/pull/37
+
+**Full Changelog**: https://github.com/Airscripts/campfire/compare/1.9.0...1.10.0
+
+# 1.9.0
+
+## What's Changed
+* feat(jaads): add telephone number validator project by @Airscripts in https://github.com/Airscripts/campfire/pull/36
+
+**Full Changelog**: https://github.com/Airscripts/campfire/compare/1.8.0...1.9.0
+
+# 1.8.0
 
-### What's Changed
+## What's Changed
 * feat(jaads): add caesar cipher project by @Airscripts in https://github.com/Airscripts/campfire/pull/35
 
-**Full Changelog**: https://github.com/Airscripts/campfire/compare/1.7.0...1.8.0  
- 
+**Full Changelog**: https://github.com/Airscripts/campfire/compare/1.7.0...1.8.0
 
-## 🎉 1.7.0
+# 1.7.0
 
-### What's Changed
+## What's Changed
 * feat(jaads): add roman numeral converter project by @Airscripts in https://github.com/Airscripts/campfire/pull/34
 
-**Full Changelog**: https://github.com/Airscripts/campfire/compare/1.6.0...1.7.0  
- 
+**Full Changelog**: https://github.com/Airscripts/campfire/compare/1.6.0...1.7.0
 
-## 🎉 1.6.0
+# 1.6.0
 
-### What's Changed
+## What's Changed
 * feat(jaads): add palindrome checker project by @Airscripts in https://github.com/Airscripts/campfire/pull/33
 
-**Full Changelog**: https://github.com/Airscripts/campfire/compare/1.5.0...1.6.0  
- 
+**Full Changelog**: https://github.com/Airscripts/campfire/compare/1.5.0...1.6.0
 
-## 🎉 1.5.0
+# 1.5.0
 
-### What's Changed
+## What's Changed
 * feat(rwd): add tribute page project by @Airscripts in https://github.com/Airscripts/campfire/pull/31
 
-**Full Changelog**: https://github.com/Airscripts/campfire/compare/1.4.0...1.5.0  
- 
+**Full Changelog**: https://github.com/Airscripts/campfire/compare/1.4.0...1.5.0
 
-## 🎉 1.4.0
+# 1.4.0
 
-### What's Changed
+## What's Changed
 * feat(rwd): add product landing page project by @Airscripts in https://github.com/Airscripts/campfire/pull/29
 
-**Full Changelog**: https://github.com/Airscripts/campfire/compare/1.3.0...1.4.0  
- 
+**Full Changelog**: https://github.com/Airscripts/campfire/compare/1.3.0...1.4.0
 
-## 🎉 1.3.0
+# 1.3.0
 
-### What's Changed
+## What's Changed
 * feat(rwd): add survey form project by @Airscripts in #27
 
-**Full Changelog**: https://github.com/Airscripts/campfire/compare/1.2.0...1.3.0  
- 
+**Full Changelog**: https://github.com/Airscripts/campfire/compare/1.2.0...1.3.0
 
-## 🎉 1.2.0
+# 1.2.0
 
-### What's Changed
+## What's Changed
 * feat: add technical documentation page project by @Airscripts in #24
 
-**Full Changelog**: https://github.com/Airscripts/campfire/compare/1.1.0...1.2.0  
- 
+**Full Changelog**: https://github.com/Airscripts/campfire/compare/1.1.0...1.2.0
 
-## 🎉 1.1.0
+# 1.1.0
 
-### What's Changed
+## What's Changed
 * feat: add personal portfolio project into responsive web design by @Airscripts in #6
 
-**Full Changelog**: https://github.com/Airscripts/campfire/compare/1.0.0...1.1.0  
- 
+**Full Changelog**: https://github.com/Airscripts/campfire/compare/1.0.0...1.1.0
 
-## 🎉 1.0.0
+# 1.0.0
 
-### What's Changed
+## What's Changed
 * feat: add curriculum base structure by @Airscripts in #4
 
 ### New Contributors

CODE_OF_CONDUCT.md

@@ -1,4 +1,3 @@
-
 # Contributor Covenant Code of Conduct
 
 ## Our Pledge

CONTRIBUTING.md

@@ -1,5 +1,2 @@
 # Contributing
-When contributing to this repository, please first discuss the change you wish to make via issue,
-email, or any other method with the owners of this repository before making a change.  
-
-Please note we have a code of conduct, please follow it in all your interactions with the project.
+When contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the owners of this repository, ensuring you follow the [Code of Conduct](https://github.com/airscripts/campfire/blob/main/CODE_OF_CONDUCT.md).  

README.md

@@ -1,31 +1,42 @@
-# 🪶 Campfire
-Repository containing all the projects made for freeCodeCamp curriculum.  
- 
+# Campfire
+Collection of projects made for freeCodeCamp's curriculum.
 
-## 📦 Installation  
+## Contents
+- [Installation](#installation)
+- [Usage](#usage)
+- [Resources](#resources)
+- [Contributing](#contributing)
+- [Support](#support)
+- [License](#license)
+
+## Installation
 Follow the steps below to make use of Campfire.
- 
 
-1. Clone this repository:  
+Clone this repository:
 ```bash
-git clone https://github.com/Airscripts/campfire.git
+git clone https://github.com/airscripts/campfire.git
 ```
- 
 
-## 🤝 Contributing  
-Contributions and suggestions about how to improve this project are welcome!  
-   
+## Usage
+404
+
+## Resources
+404
 
-## 💚 Support  
-If you want to support my work you can do it with the links below.  
+## Contributing
+Contributions and suggestions about how to improve this project are welcome!
+Please follow [our contribution guidelines](https://github.com/airscripts/campfire/blob/main/CONTRIBUTING.md).
 
+## Support
+If you want to support my work you can do it by following me, leaving a star, sharing my projects or also donating at the links below.  
 Choose what you find more suitable for you:  
-- [Support me on GitHub](https://github.com/sponsors/Airscripts)  
-- [Support me via linktr.ee](https://linktr.ee/airscript)  
 
-Thank you so much, it means a lot for me!  
-   
+<a href="https://sponsor.airscript.it" target="blank">
+  <img src="https://raw.githubusercontent.com/airscripts/assets/main/images/github-sponsors.svg" alt="GitHub Sponsors" width="30px" />
+</a>&nbsp;
+<a href="https://kofi.airscript.it" target="blank">
+  <img src="https://raw.githubusercontent.com/airscripts/assets/main/images/kofi.svg" alt="Kofi" width="30px" />
+</a>
 
-## 💳 License  
-This repository is licensed under [GPL-3.0 License](https://github.com/Airscripts/campfire/blob/main/LICENSE).  
-&nbsp;
+## License
+This repository is licensed under [GPL-3.0 License](https://github.com/airscripts/campfire/blob/main/LICENSE).

SECURITY.md

@@ -6,4 +6,4 @@
 | 1.x.x   | :white_check_mark: |
 
 ## Reporting a Vulnerability
-To report a vulnerability, open an [issue](https://github.com/Airscripts/campfire/issues/new/choose).
+To report a vulnerability, open an [issue](https://github.com/airscripts/campfire/issues/new/choose).

VERSION

@@ -1 +1 @@
-1.8.0
+1.17.0

curriculum/back-end-development-and-apis/request-header-parser-microservice/index.js

@@ -0,0 +1,19 @@
+let express = require('express');
+let app = express();
+
+app.enable('trust proxy');
+
+app.get('/', function(req, res) {
+	let ip = req.ip;
+	let sysinfos = req.headers['user-agent'];
+	let lang = req.headers['accept-language'];
+
+	res.json({
+		'ip': `${ip}`,
+		'language': `${lang}`,
+		'software': `${sysinfos}`
+	});
+})
+
+console.log('Server is listening.');
+app.listen(8080);

curriculum/back-end-development-and-apis/timestamp-microservice/index.js

@@ -0,0 +1,30 @@
+let express = require('express');
+let app = express();
+
+app.get('/api/timestamp/:date_string?', function (req, res) {
+  let date_string = new Date(parseInt(req.params.date_string));
+
+  if (req.params.date_string == undefined) {
+    let date_string = new Date();
+
+    res.json({
+      'unix': date_string.getTime(),
+      'utc': date_string.toUTCString()
+    });
+  }
+
+  else if (date_string == "Invalid Date") {
+    res.json({ 'error': `${date_string}` });
+  }
+
+  else {
+    res.json({
+      'unix': date_string.getTime(),
+      'utc': date_string.toUTCString()
+    });
+  }
+});
+
+let listener = app.listen(process.env.PORT, function () {
+  console.log('Your app is listening on port ' + listener.address().port);
+});

curriculum/data-visualization/bar-chart/index.html

@@ -0,0 +1,19 @@
+<!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.0">
+
+  <title>Bar Chart</title>
+
+  <script src="https://d3js.org/d3.v7.min.js"></script>
+</head>
+
+<body>
+  <script src="./scripts.js"></script>
+</body>
+
+</html>

curriculum/data-visualization/bar-chart/scripts.js

@@ -0,0 +1,56 @@
+fetch('https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json')
+  .then(response => response.json())
+
+  .then(json => {
+    let svg = null;
+    let title = null;
+    let yAxis = null;
+    let xAxis = null;
+    let yScale = null;
+    let gyAxis = null;
+    let xScale = null;
+    let gxAxis = null;
+
+    let data = json.data;
+    let height = 500;
+    let width = 1000;
+
+    svg = d3.select("body")
+      .append("svg")
+      .attr("height", height)
+      .attr("width", width);
+
+    title = svg.append("text")
+      .text("Bar Chart")
+      .attr("id", "title");
+
+    yScale = d3.scaleLinear()
+      .domain([
+        d3.min(data, (d) => d[1]),
+        d3.max(data, (d) => d[1])
+      ])
+      .range([height - 200, 0]);
+
+    yAxis = d3.axisLeft()
+      .scale(yScale);
+
+    gyAxis = svg.append("g")
+      .attr("id", "y-axis")
+      .attr("transform", "translate(100, 100)")
+      .call(yAxis);
+
+    xScale = d3.scaleLinear()
+      .domain([
+        d3.min(data, (d) => Number(d[0].split("-")[0])),
+        d3.max(data, (d) => Number(d[0].split("-")[0]))
+      ])
+      .range([0, width - 200]);
+
+    xAxis = d3.axisBottom()
+      .scale(xScale);
+
+    gxAxis = svg.append("g")
+      .attr("id", "x-axis")
+      .attr("transform", "translate(100," + (height - 100) + ")")
+      .call(xAxis);
+  });

curriculum/front-end-development-libraries/clock/.gitignore

@@ -0,0 +1,13 @@
+/.pnp
+/build
+.pnp.js
+/coverage
+.DS_Store
+.env.local
+/node_modules
+npm-debug.log*
+.env.test.local
+yarn-debug.log*
+yarn-error.log*
+.env.production.local
+.env.development.local

curriculum/front-end-development-libraries/clock/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "clock",
+  "version": "1.0.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^13.5.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "5.0.0",
+    "web-vitals": "^2.1.2"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

curriculum/front-end-development-libraries/clock/public/index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+
+  <link
+    rel="stylesheet"
+    crossorigin="anonymous"
+    href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
+    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
+  >
+
+  <script src="https://kit.fontawesome.com/5db376b055.js" crossorigin="anonymous"></script>
+
+  <title>Clock</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+</body>
+
+</html>

curriculum/front-end-development-libraries/clock/src/App.css

@@ -0,0 +1,62 @@
+#app {
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+}
+
+#app-settings {
+  display: flex;
+  align-items: center;
+  padding-top: -100px;
+  justify-content: center;
+}
+
+#app-break {
+  display: flex;
+  align-items: center;
+  margin-right: 100px;
+  flex-direction: column;
+  justify-content: center;
+}
+
+#app-break-contents {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+}
+
+#app-session {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+}
+
+#app-session-contents {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+}
+
+#app-clock {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+}
+
+#app-actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.settings-button {
+  width: 50px;
+  font-size: 18px;
+  margin-right: 25px;
+}

curriculum/front-end-development-libraries/clock/src/App.js

@@ -0,0 +1,231 @@
+import { useRef } from "react";
+import { useState } from "react";
+import { useEffect } from "react";
+
+import "./App.css";
+
+function App() {
+  const [rest, setRest] = useState(5);
+  const [seconds, setSeconds] = useState(0);
+  const [session, setSession] = useState(25);
+  const [minutes, setMinutes] = useState(25);
+  const [status, setStatus] = useState("stop");
+  const [typology, setTypology] = useState("session");
+
+  const audioRef = useRef();
+
+  useEffect(() => {
+    let interval;
+
+    if (!minutes && !seconds) {
+      audioRef.current.play();
+
+      switch (typology) {
+        case "session":
+          setMinutes(rest);
+          setSeconds(0);
+          setTypology("break");
+          return;
+
+        case "break":
+          setMinutes(session);
+          setSeconds(0);
+          setTypology("session");
+          return;
+
+        default:
+          return;
+      }
+    }
+
+    if (status === "play") {
+      interval = setInterval(() => {
+        if (!minutes && !seconds) return;
+
+        if (!seconds) {
+          setSeconds(59);
+          setMinutes(minutes - 1);
+          return;
+        }
+
+        setSeconds(seconds - 1);
+        return;
+      }, 1000);
+    }
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [status, typology, seconds]);
+
+  return (
+    <div id="app">
+      <div id="app-settings">
+        <div id="app-break">
+          <div id="app-break-contents">
+            <p id="break-label" style={{ fontSize: 18 }}>
+              Break Length
+            </p>
+
+            <p id="break-length" style={{ fontSize: 18 }}>
+              {rest}
+            </p>
+          </div>
+
+          <div id="app-break-buttons">
+            <button
+              id="break-decrement"
+              className="btn btn-light settings-button"
+              onClick={() => setTime(rest, "break", "-")}
+            >
+              -
+            </button>
+
+            <button
+              id="break-increment"
+              style={{ marginRight: 0 }}
+              className="btn btn-light settings-button"
+              onClick={() => setTime(rest, "break", "+")}
+            >
+              +
+            </button>
+          </div>
+        </div>
+
+        <div id="app-session">
+          <div id="app-session-contents">
+            <p id="session-label" style={{ fontSize: 18 }}>
+              Session Length
+            </p>
+
+            <p id="session-length" style={{ fontSize: 18 }}>
+              {session}
+            </p>
+          </div>
+
+          <div id="app-session-buttons">
+            <button
+              id="session-decrement"
+              className="btn btn-light settings-button"
+              onClick={() => setTime(minutes, "session", "-")}
+            >
+              -
+            </button>
+
+            <button
+              id="session-increment"
+              style={{ marginRight: 0 }}
+              className="btn btn-light settings-button"
+              onClick={() => setTime(session, "session", "+")}
+            >
+              +
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div
+        id="app-clock"
+        style={{
+          fontSize: 36,
+          marginTop: 50,
+        }}
+      >
+        <p id="timer-label">
+          {typology.charAt(0).toUpperCase() + typology.slice(1)}
+        </p>
+
+        <p id="time-left">
+          {renderTime(minutes)}:{renderTime(seconds)}
+        </p>
+      </div>
+
+      <div id="app-actions">
+        <button
+          id="start_stop"
+          className="btn"
+          onClick={() => play()}
+          style={{ marginRight: 10, fontSize: 36 }}
+        >
+          {status === "stop" ? (
+            <i className="fas fa-play" style={{ color: "white" }}></i>
+          ) : (
+            <i className="fas fa-stop" style={{ color: "white" }}></i>
+          )}
+        </button>
+
+        <button
+          id="reset"
+          className="btn"
+          onClick={() => reset()}
+          style={{ fontSize: 36 }}
+        >
+          <i className="fas fa-redo" style={{ color: "white" }}></i>
+        </button>
+      </div>
+
+      <audio
+        id="beep"
+        ref={audioRef}
+        src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/audio/BeepSound.wav"
+      ></audio>
+    </div>
+  );
+
+  function play() {
+    status === "stop" ? setStatus("play") : setStatus("stop");
+  }
+
+  function reset() {
+    audioRef.current.pause();
+    audioRef.current.currentTime = 0;
+    setInitialState();
+  }
+
+  function setInitialState() {
+    setRest(5);
+    setSession(25);
+    setMinutes(25);
+    setSeconds(0);
+    setStatus("stop");
+    setTypology("session");
+  }
+
+  function setTime(time, type, operator) {
+    if (status === "play") return;
+
+    switch (time) {
+      case 1:
+        time = operator === "+" ? time + 1 : time;
+        break;
+
+      case 60:
+        time = operator === "+" ? time : time - 1;
+        break;
+
+      default:
+        time = operator === "+" ? time + 1 : time - 1;
+        break;
+    }
+
+    if (type === "session") {
+      setSession(time);
+      setMinutes(time);
+      return;
+    }
+
+    if (type === "break") {
+      setRest(time);
+      return;
+    }
+
+    return;
+  }
+
+  function renderTime(time) {
+    if (time < 10) return "0" + time;
+    return time;
+  }
+}
+
+export default App;

curriculum/front-end-development-libraries/clock/src/index.css

@@ -0,0 +1,32 @@
+body {
+  margin: 0;
+
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    "Roboto",
+    "Oxygen",
+    "Ubuntu",
+    "Cantarell",
+    "Fira Sans",
+    "Droid Sans",
+    "Helvetica Neue",
+    sans-serif;
+
+  color: white;
+  background-color: #000000;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  background-image: linear-gradient(147deg, #000000 0%, #434343 74%);
+}
+
+code {
+  font-family:
+    source-code-pro,
+    Menlo,
+    Monaco,
+    Consolas,
+    "Courier New",
+    monospace;
+}

curriculum/front-end-development-libraries/clock/src/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import App from './App';
+import './index.css';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);

curriculum/front-end-development-libraries/drum-machine/.gitignore

@@ -0,0 +1,13 @@
+/.pnp
+/build
+.pnp.js
+/coverage
+.DS_Store
+.env.local
+/node_modules
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.env.test.local
+.env.production.local
+.env.development.local

curriculum/front-end-development-libraries/drum-machine/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "drum-machine",
+  "version": "1.0.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
+    "@types/jest": "^24.0.0",
+    "@types/node": "^12.0.0",
+    "@types/react": "^16.9.0",
+    "@types/react-dom": "^16.9.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-scripts": "3.4.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

curriculum/front-end-development-libraries/drum-machine/public/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="description" content="Web site created using create-react-app" />
+
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/assets/images/logo-192x192.png" />
+
+  <title>Drum Machine</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+</body>
+
+</html>

curriculum/front-end-development-libraries/drum-machine/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

curriculum/front-end-development-libraries/drum-machine/src/App.jsx

@@ -0,0 +1,162 @@
+import React from 'react';
+import './App.css';
+
+function App() {
+  const [display, setDisplay] = React.useState("Initial State");
+
+  const playSound = (event, key) => {
+    let sound = document.getElementById(key);
+    sound.play();
+    setDisplay(key);
+  };
+
+  const playSoundOnKeyPress = (event) => {
+    let sound = document.getElementById(event.key);
+    sound.play();
+    setDisplay(event.key);
+  }
+
+  return (
+    <div id="drum-machine">
+      <div id="display">{display}</div>
+
+      <button
+        tabIndex={0}
+        id="drum-pad-1"
+        className="drum-pad"
+        onKeyPress={playSoundOnKeyPress}
+        onClick={(event) => playSound(event, "Q")}
+      >
+        Q
+
+        <audio
+          id="Q"
+          className="clip"
+          src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"
+        />
+      </button>
+
+      <button
+        id="drum-pad-2"
+        className="drum-pad"
+        onKeyPress={playSoundOnKeyPress}
+        onClick={(event) => playSound(event, "W")}
+      >
+        W
+
+        <audio
+          id="W"
+          className="clip"
+          src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"
+        />
+      </button>
+
+      <button
+        id="drum-pad-3"
+        className="drum-pad"
+        onKeyPress={playSoundOnKeyPress}
+        onClick={(event) => playSound(event, "E")}
+      >
+        E
+
+        <audio
+          id="E"
+          className="clip"
+          src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"
+        />
+      </button>
+
+      <button
+        id="drum-pad-4"
+        className="drum-pad"
+        onKeyPress={playSoundOnKeyPress}
+        onClick={(event) => playSound(event, "A")}
+      >
+        A
+
+        <audio
+          id="A"
+          className="clip"
+          src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"
+        />
+      </button>
+
+      <button
+        id="drum-pad-5"
+        className="drum-pad"
+        onKeyPress={playSoundOnKeyPress}
+        onClick={(event) => playSound(event, "S")}
+      >
+        S
+
+        <audio
+          id="S"
+          className="clip"
+          src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"
+        />
+      </button>
+
+      <button
+        id="drum-pad-6"
+        className="drum-pad"
+        onKeyPress={playSoundOnKeyPress}
+        onClick={(event) => playSound(event, "D")}
+      >
+        D
+
+        <audio
+          id="D"
+          className="clip"
+          src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"
+        />
+      </button>
+
+      <button
+        id="drum-pad-7"
+        className="drum-pad"
+        onKeyPress={playSoundOnKeyPress}
+        onClick={(event) => playSound(event, "Z")}
+      >
+        Z
+
+        <audio
+          id="Z"
+          className="clip"
+          src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"
+        />
+      </button>
+
+      <button
+        id="drum-pad-8"
+        className="drum-pad"
+        onKeyPress={playSoundOnKeyPress}
+        onClick={(event) => playSound(event, "X")}
+      >
+        X
+
+        <audio
+          id="X"
+          className="clip"
+          src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"
+        />
+      </button>
+
+      <button
+        id="drum-pad-9"
+        className="drum-pad"
+        onKeyPress={playSoundOnKeyPress}
+        onClick={(event) => playSound(event, "C")}
+      >
+        C
+
+        <audio
+          id="C"
+          className="clip"
+          src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"
+        />
+      </button>
+    </div>
+  );
+}
+
+export default App;

curriculum/front-end-development-libraries/drum-machine/src/index.css

@@ -0,0 +1,29 @@
+body {
+  margin: 0;
+
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    'Roboto',
+    'Oxygen',
+    'Ubuntu',
+    'Cantarell',
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
+    sans-serif;
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: 
+    source-code-pro,
+    Menlo,
+    Monaco,
+    Consolas,
+    'Courier New',
+    monospace;
+}

curriculum/front-end-development-libraries/drum-machine/src/index.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import './index.css';
+import App from './App';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);

curriculum/front-end-development-libraries/drum-machine/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

curriculum/front-end-development-libraries/javascript-calculator/.gitignore

@@ -0,0 +1,13 @@
+/.pnp
+/build
+.pnp.js
+/coverage
+.DS_Store
+.env.local
+/node_modules
+npm-debug.log*
+.env.test.local
+yarn-debug.log*
+yarn-error.log*
+.env.production.local
+.env.development.local

curriculum/front-end-development-libraries/javascript-calculator/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "javascript-calculator",
+  "version": "1.0.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.13.0",
+    "@testing-library/react": "^11.2.7",
+    "@testing-library/user-event": "^12.8.3",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "4.0.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

curriculum/front-end-development-libraries/javascript-calculator/public/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/assets/images/logo-192x192.png" />
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
+
+  <title>Javascript Calculator</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+</body>
+
+</html>

curriculum/front-end-development-libraries/javascript-calculator/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

curriculum/front-end-development-libraries/javascript-calculator/src/App.css

@@ -0,0 +1,217 @@
+.calculator {
+  display: flex;
+  height: 100vh;
+  align-items: center;
+  justify-content: center;
+  background-color: #1e2326;
+}
+
+.calculator__container {
+  width: 320px;
+  height: 440px;
+  overflow: hidden;
+  border-radius: 5px;
+  background-color: white;
+  box-shadow: 0px 0px 100px #0f1012;
+}
+
+.calculator__screen {
+  min-height: 120px;
+  background-color: #fafafa;
+}
+
+.calculator__digits {
+  display: grid;
+  grid-template-columns: 80px 80px 80px 80px;
+  grid-template-rows: 64px 64px 64px 64px 64px;
+
+  grid-template-areas: 
+    "clear clear divide multiply"
+    "seven eight nine subtract"
+    "four five six add"
+    "one two three equals"
+    "zero zero decimal equals";
+}
+
+#display__digits {
+  display: block;
+  font-size: 32px;
+  color: #1e2326;
+  margin-top: 10px;
+  margin-left: 15px;
+}
+
+#clear {
+  display: flex;
+  color: #fafafa;
+  font-size: 18px;
+  grid-area: clear;
+  align-items: center;
+  justify-content: center;
+  background-color: #1e2326;
+}
+
+#add {
+  display: flex;
+  grid-area: add;
+  color: #fafafa;
+  font-size: 18px;
+  align-items: center;
+  border-color: #6152a3;
+  justify-content: center;
+  background-color: #5e4bb6;
+}
+
+#subtract {
+  display: flex;
+  color: #fafafa;
+  font-size: 18px;
+  align-items: center;
+  grid-area: subtract;
+  justify-content: center;
+  border-color: #6152a3;
+  background-color: #5e4bb6;
+}
+
+#multiply {
+  display: flex;
+  font-size: 18px;
+  color: #fafafa;
+  align-items: center;
+  grid-area: multiply;
+  justify-content: center;
+  border-color: #6152a3;
+  background-color: #5e4ab5;
+}
+
+#divide {
+  display: flex;
+  color: #fafafa;
+  font-size: 18px;
+  grid-area: divide;
+  align-items: center;
+  border-color: #6152a3;
+  justify-content: center;
+  background-color: #5e4bb6;
+}
+
+#equals {
+  display: flex;
+  color: #1e2326;
+  font-size: 18px;
+  grid-area: equals;
+  align-items: center;
+  justify-content: center;
+  border-color: #e3b66d;
+  background-color: #fec208;
+}
+
+#decimal {
+  display: flex;
+  color: #fafafa;
+  font-size: 18px;
+  grid-area: decimal;
+  align-items: center;
+  justify-content: center;
+  background-color: #1e2326;
+}
+
+#zero {
+  display: flex;
+  color: #fafafa;
+  font-size: 18px;
+  grid-area: zero;
+  align-items: center;
+  justify-content: center;
+  background-color: #1e2326;
+}
+
+#one {
+  display: flex;
+  color: #fafafa;
+  grid-area: one;
+  font-size: 18px;
+  align-items: center;
+  justify-content: center;
+  background-color: #1e2326;
+}
+
+#two {
+  display: flex;
+  color: #fafafa;
+  grid-area: two;
+  font-size: 18px;
+  align-items: center;
+  justify-content: center;
+  background-color: #1e2326;
+}
+
+#three {
+  display: flex;
+  color: #fafafa;
+  font-size: 18px;
+  grid-area: three;
+  align-items: center;
+  justify-content: center;
+  background-color: #1e2326;
+}
+
+#four {
+  display: flex;
+  color: #fafafa;
+  font-size: 18px;
+  grid-area: four;
+  align-items: center;
+  justify-content: center;
+  background-color: #1e2326;
+}
+
+#five {
+  display: flex;
+  color: #fafafa;
+  font-size: 18px;
+  grid-area: five;
+  align-items: center;
+  justify-content: center;
+  background-color: #1e2326;
+}
+
+#six {
+  display: flex;
+  color: #fafafa;
+  grid-area: six;
+  font-size: 18px;
+  align-items: center;
+  justify-content: center;
+  background-color: #1e2326;
+}
+
+#seven {
+  display: flex;
+  color: #fafafa;
+  font-size: 18px;
+  grid-area: seven;
+  align-items: center;
+  justify-content: center;
+  background-color: #1e2326;
+}
+
+#eight {
+  display: flex;
+  color: #fafafa;
+  font-size: 18px;
+  grid-area: eight;
+  align-items: center;
+  justify-content: center;
+  background-color: #1e2326;
+}
+
+#nine {
+  display: flex;
+  color: #fafafa;
+  font-size: 18px;
+  grid-area: nine;
+  align-items: center;
+  justify-content: center;
+  background-color: #1e2326;
+}

curriculum/front-end-development-libraries/javascript-calculator/src/App.js

@@ -0,0 +1,279 @@
+import React from "react";
+
+import replaceCharacter from "./scripts/replaceCharacter.script.js";
+import "./App.css";
+
+const ZERO = ["0"];
+const DECIMAL = ["."];
+const SUBTRACT_OPERATOR = ["-"];
+const DEFAULT_EXPRESSION = "0\n0";
+const OPERATORS = ["+", "-", "*", "/"];
+const MATH_NUMBERS = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
+
+const ALPHABET_NUMBERS = [
+  "zero",
+  "one",
+  "two",
+  "three",
+  "four",
+  "five",
+  "six",
+  "seven",
+  "eight",
+  "nine",
+];
+
+function App() {
+  const [display, setDisplay] = React.useState({
+    currentValue: "",
+    currentNumber: "",
+    previousValue: "",
+    previousNumber: "",
+    hasEqualBeenPressed: false,
+    expression: DEFAULT_EXPRESSION,
+  });
+
+  let expression = display.expression.split("\n")[0];
+  let result = display.expression.split("\n")[1];
+
+  return (
+    <div className="calculator">
+      <div className="calculator__container">
+        <div className="calculator__screen">
+          <div id="display">
+            <div style={{ wordWrap: "break-word" }}>
+              <span id="display__digits">
+                {result !== "0" ? "" : expression}
+              </span>
+            </div>
+
+            <div style={{ wordWrap: "break-word" }}>
+              <span id="display__digits">
+                {result === "0" ? "" : result}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <div className="calculator__digits">
+          <button onClick={() => clearDisplay()} id="clear">
+            <span>AC</span>
+          </button>
+
+          <button onClick={() => setDisplayValues("+")} id="add">
+            <span>+</span>
+          </button>
+
+          <button onClick={() => setDisplayValues("-")} id="subtract">
+            <span>-</span>
+          </button>
+
+          <button onClick={() => setDisplayValues("*")} id="multiply">
+            <span>x</span>
+          </button>
+
+          <button onClick={() => setDisplayValues("/")} id="divide">
+            <span>/</span>
+          </button>
+
+          {MATH_NUMBERS.map((number, index) => {
+            return (
+              <button
+                key={number}
+                id={ALPHABET_NUMBERS[index]}
+                onClick={() => setDisplayValues(number)}
+              >
+                <span>{number}</span>
+              </button>
+            );
+          })}
+
+          <button onClick={() => setDisplayValues(".")} id="decimal">
+            <span>.</span>
+          </button>
+
+          <button onClick={() => evaluateExpression()} id="equals">
+            <span>=</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+
+  function setDisplayValues(value) {
+    let isOperatorInValue = OPERATORS.includes(value);
+    let isOperatorInCurrentValue = OPERATORS.includes(display.currentValue);
+    let splitCurrentNumber = display.currentNumber.split("");
+    let isDecimalInValue = DECIMAL.includes(value);
+    let hasCurrentNumberDecimal = splitCurrentNumber.includes(".");
+
+    let isOperatorInValueAndCurrentValue =
+      isOperatorInValue && isOperatorInCurrentValue;
+
+    if (!display.currentValue && !display.hasEqualBeenPressed) {
+      firstDigit(value);
+      return;
+    }
+
+    if (isOperatorInValueAndCurrentValue) {
+      checkForDoubleOperator(value);
+      return;
+    }
+
+    if (isOperatorInValue) {
+      if (display.hasEqualBeenPressed) {
+        setDisplay({
+          ...display,
+          currentNumber: "",
+          currentValue: value,
+          hasEqualBeenPressed: false,
+          expression: `${result}${value}\n0`,
+          previousValue: display.currentValue,
+          previousNumber: display.currentNumber,
+        });
+
+        return;
+      }
+
+      setDisplay({
+        ...display,
+        currentNumber: "",
+        currentValue: value,
+        previousValue: display.currentValue,
+        previousNumber: display.currentNumber,
+        expression: `${expression}${value}\n${result}`,
+      });
+
+      return;
+    }
+
+    if (isDecimalInValue) {
+      if (hasCurrentNumberDecimal) {
+        return;
+      }
+    }
+
+    setDisplay({
+      ...display,
+      currentValue: value,
+      previousValue: display.currentValue,
+      expression: `${expression}${value}\n${result}`,
+      currentNumber: `${display.currentNumber}${value}`,
+    });
+  }
+
+  function firstDigit(value) {
+    if (ZERO.includes(value)) return;
+
+    if (DECIMAL.includes(value)) {
+      setDisplay({
+        ...display,
+        currentValue: `0${value}`,
+        expression: `0${value}\n${result}`,
+        previousValue: display.currentValue,
+        currentNumber: `${display.currentNumber}${value}`,
+      });
+
+      return;
+    }
+
+    setDisplay({
+      ...display,
+      currentValue: value,
+      expression: `${value}\n${result}`,
+      previousValue: display.currentValue,
+      currentNumber: `${display.currentNumber}${value}`,
+    });
+  }
+
+  function checkForDoubleOperator(value) {
+    let newExpression;
+    let isValueSubtractOperator = SUBTRACT_OPERATOR.includes(value);
+
+    let isSecondOperator = OPERATORS.includes(
+      expression[expression.length - 2]
+    );
+
+    let isValueSubtractAndNotSecondOperator =
+      isValueSubtractOperator && !isSecondOperator;
+
+    if (isValueSubtractAndNotSecondOperator) {
+      setDisplay({
+        currentNumber: "",
+        currentValue: value,
+        previousValue: display.currentValue,
+        previousNumber: display.currentNumber,
+        expression: `${expression}${value}\n${result}`,
+      });
+
+      return;
+    }
+
+    if (isSecondOperator) {
+      newExpression = replaceCharacter(expression, expression.length - 2, "");
+
+      newExpression = replaceCharacter(
+        newExpression,
+        newExpression.length - 1,
+        value
+      );
+
+      setDisplay({
+        currentNumber: "",
+        currentValue: value,
+        previousValue: display.currentValue,
+        previousNumber: display.currentNumber,
+        expression: `${newExpression}\n${result}`,
+      });
+
+      return;
+    }
+
+    newExpression = replaceCharacter(expression, expression.length - 1, value);
+
+    setDisplay({
+      ...display,
+      currentNumber: "",
+      currentValue: value,
+      previousValue: display.currentValue,
+      previousNumber: display.currentNumber,
+      expression: `${newExpression}\n${result}`,
+    });
+
+    return;
+  }
+
+  function evaluateExpression() {
+    let newExpression = expression;
+
+    let isOperatorInLastIndex = OPERATORS.includes(
+      expression[expression.length - 1]
+    );
+
+    if (isOperatorInLastIndex) {
+      newExpression = replaceCharacter(expression, expression.length - 1, "");
+    }
+
+    setDisplay({
+      ...display,
+      currentValue: "",
+      hasEqualBeenPressed: true,
+      previousValue: display.currentValue,
+      expression: `${newExpression}\n${eval(newExpression)}`,
+    });
+  }
+
+  function clearDisplay() {
+    setDisplay({
+      ...display,
+      currentValue: "",
+      previousValue: "",
+      currentNumber: "",
+      previousNumber: "",
+      hasEqualBeenPressed: false,
+      expression: DEFAULT_EXPRESSION,
+    });
+  }
+}
+
+export default App;

curriculum/front-end-development-libraries/javascript-calculator/src/index.css

@@ -0,0 +1,36 @@
+body {
+  margin: 0;
+
+  font-family:
+    "Roboto",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    "Roboto",
+    "Oxygen",
+    "Ubuntu",
+    "Cantarell",
+    "Fira Sans",
+    "Droid Sans",
+    "Helvetica Neue",
+    sans-serif;
+
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+button {
+  border-width: 0.5px;
+  font-family: inherit;
+  border-color: #272c2f;
+}
+
+code {
+  font-family:
+    source-code-pro,
+    Menlo,
+    Monaco,
+    Consolas,
+    "Courier New",
+    monospace;
+}

curriculum/front-end-development-libraries/javascript-calculator/src/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import './index.css';
+import App from './App';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);

curriculum/front-end-development-libraries/javascript-calculator/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

curriculum/front-end-development-libraries/javascript-calculator/src/scripts/replaceCharacter.script.js

@@ -0,0 +1,20 @@
+/**
+ * This function replaces a character at a given index.
+ *
+ * @param str
+ * @param index
+ * @param character
+ * @returns string
+ */
+function replaceCharacter(str, index, character) {
+  // Replacing character.
+  str = str.split("");
+  str[index] = character;
+  str = str.join("");
+
+  // Returning back string.
+  return str;
+}
+
+// Exporting script and others.
+export default replaceCharacter;

curriculum/front-end-development-libraries/markdown-previewer/.gitignore

@@ -0,0 +1,13 @@
+/.pnp
+/build
+.pnp.js
+/coverage
+.DS_Store
+.env.local
+/node_modules
+npm-debug.log*
+.env.test.local
+yarn-debug.log*
+yarn-error.log*
+.env.production.local
+.env.development.local

curriculum/front-end-development-libraries/markdown-previewer/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "markdown-previewer",
+  "version": "1.0.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
+    "marked": "^1.0.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-scripts": "3.4.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

curriculum/front-end-development-libraries/markdown-previewer/public/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/assets/images/logo-192x192.png" />
+
+  <title>Markdown Previewer</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+</body>
+
+</html>

curriculum/front-end-development-libraries/markdown-previewer/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

curriculum/front-end-development-libraries/markdown-previewer/src/App.css

@@ -0,0 +1,51 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  display: flex;
+  color: white;
+  min-height: 100vh;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  background-color: #282c34;
+  font-size: calc(10px + 2vmin);
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.main {
+  padding-left: 10px;
+}
+
+.container {
+  display: flex;
+}
+
+#editor {
+  flex-basis: 50%;
+}
+
+#preview {
+  flex-basis: 50%;
+  padding-left: 10px;
+}

curriculum/front-end-development-libraries/markdown-previewer/src/App.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import marked from "marked";
+
+import './App.css';
+
+function App() {
+  const [text, setText] = React.useState("# Welcome to Markdown Previewer!");
+
+  function updateTextState(event) {
+    setText(event.target.value);
+  }
+
+  function getMarkdownText() {
+    let markup = marked(text);
+    return { __html: markup };
+  }
+
+  return (
+    <div className="main">
+      <h1 className="title">Mark</h1>
+
+      <div className="container">
+        <textarea
+          id="editor"
+          value={text}
+          onChange={(event) => updateTextState(event)} 
+        />
+
+        <div 
+          id="preview"
+          dangerouslySetInnerHTML={getMarkdownText()}>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default App;

curriculum/front-end-development-libraries/markdown-previewer/src/index.css

@@ -0,0 +1,29 @@
+body {
+  margin: 0;
+
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    'Roboto',
+    'Oxygen',
+    'Ubuntu',
+    'Cantarell',
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
+    sans-serif;
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: 
+    source-code-pro,
+    Menlo,
+    Monaco,
+    Consolas,
+    'Courier New',
+    monospace;
+}

curriculum/front-end-development-libraries/markdown-previewer/src/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import './index.css';
+import App from './App';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);

curriculum/front-end-development-libraries/random-quote-machine/.gitignore

@@ -0,0 +1,13 @@
+/.pnp
+/build
+.pnp.js
+/coverage
+.DS_Store
+.env.local
+/node_modules
+npm-debug.log*
+.env.test.local
+yarn-debug.log*
+yarn-error.log*
+.env.production.local
+.env.development.local

curriculum/front-end-development-libraries/random-quote-machine/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "random-quote-machine",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "bootstrap": "^4.3.1",
+    "bootstrap-social": "^5.1.1",
+    "font-awesome": "^4.7.0",
+    "jquery": "^3.3.1",
+    "popper.js": "^1.14.7",
+    "react": "^16.8.2",
+    "react-dom": "^16.8.2",
+    "react-pose": "^4.0.7",
+    "react-redux": "^6.0.1",
+    "react-scripts": "2.1.5",
+    "redux": "^4.0.1",
+    "redux-logger": "^3.0.6",
+    "redux-thunk": "^2.3.0",
+    "typescript": "^3.3.3333"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}

curriculum/front-end-development-libraries/random-quote-machine/public/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+
+  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+  <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
+
+  <title>Random Quote Machine</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+</body>
+
+</html>

curriculum/front-end-development-libraries/random-quote-machine/src/App.css

@@ -0,0 +1,43 @@
+.quote {
+  display: flex;
+  color: #282c34;
+  min-height: 100vh;
+  text-align: center;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  font-family: 'Quicksand';
+  background-color: #282c34;
+
+}
+
+@keyframes fadein {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+
+.button-share-new {
+  display: flex;
+  justify-content: center;
+}
+
+#tweet-quote {
+  font-size: 18px;
+  margin-left: 5px;
+}
+
+#new-quote {
+  font-size: 12px;
+}
+
+#quote-box {
+  border-radius: 3px;
+  background-color: white;
+  padding: 40px 50px 40px 50px;
+  box-shadow: 0px 0px 5px 0px #282c34;
+}
+
+#author {
+  font-size: 14px;
+}

curriculum/front-end-development-libraries/random-quote-machine/src/App.js

@@ -0,0 +1,21 @@
+import { Provider } from 'react-redux';
+import React, { Component } from 'react';
+
+import Quotes from './components/RandomQuote';
+import { ConfigureStore } from './redux/store';
+
+import './App.css';
+
+const store = ConfigureStore();
+
+class App extends Component {
+  render() {
+    return (
+      <Provider store={store}>
+        <Quotes />
+      </Provider>
+    );
+  }
+}
+
+export default App;

curriculum/front-end-development-libraries/random-quote-machine/src/components/RandomQuote.jsx

@@ -0,0 +1,109 @@
+import posed from 'react-pose';
+import { connect } from 'react-redux';
+import React, { Component } from 'react';
+
+import { generateRandomQuote } from '../redux/actions';
+
+import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
+import '../../node_modules/font-awesome/css/font-awesome.min.css';
+import '../App.css';
+
+const mapStateToProps = state => {
+  return {
+    quotes: state.quotes,
+  };
+};
+
+const mapDispatchToProps = dispatch => ({
+  generateRandomQuote: () => { dispatch(generateRandomQuote()) },
+});
+
+const Box = posed.div({
+  hidden: { opacity: 0 },
+  visible: { opacity: 1 },
+});
+
+class Quotes extends Component {
+  constructor(props) {
+    super(props);
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  state = { isVisible: false }
+
+  componentDidMount() {
+    this.props.generateRandomQuote();
+    this.setState({ isVisible: !this.state.isVisible });
+  }
+
+  async handleClick() {
+    await new Promise((resolve) => {
+      setTimeout(() => {
+        this.setState({ isVisible: !this.state.isVisible });
+        resolve();
+      }, 500)
+    })
+
+    setTimeout(() => {
+      this.props.generateRandomQuote();
+      this.setState({ isVisible: !this.state.isVisible });
+    }, 500)
+
+  }
+
+  render() {
+    let environmentColorsList = [
+      "#16a085",
+      "#27ae60",
+      "#2c3e50",
+      "#f39c12",
+      "#e74c3c",
+      "#9b59b6",
+      "#FB6964",
+      "#342224",
+      "#472E32",
+      "#BDBB99",
+      "#77B1A9",
+      "#73A857"
+    ];
+
+    let randomNumber = Math.floor(Math.random() * (environmentColorsList.length - 0) + 0);
+    let hrefTweetForTweeter = `https://twitter.com/intent/tweet?text=${this.props.quotes.quote}`;
+    const { isVisible } = this.state;
+
+    return (
+      <Box
+        className="quote"
+        pose={isVisible ? 'visible' : 'hidden'}
+        style={{ backgroundColor: environmentColorsList[randomNumber] }}
+      >
+        <div id="quote-box">
+          <h4 id="text">{this.props.quotes.quote}</h4>
+          <p id="author">{this.props.quotes.author}</p>
+
+          <div className="button-share-new">
+            <button
+              id="new-quote"
+              className="btn btn-dark"
+              onClick={this.handleClick}
+              style={{ backgroundColor: environmentColorsList[randomNumber] }}
+            >
+              New Quote
+            </button>
+
+            <a id="tweet-quote" href={hrefTweetForTweeter}>
+              <button
+                className="fa fa-twitter btn btn-dark"
+                style={{ backgroundColor: environmentColorsList[randomNumber] }}
+              ></button>
+            </a>
+          </div>
+        </div>
+
+        <p style={{ color: "#ffffff", padding: 10 }}>by Anonymous</p>
+      </Box>
+    );
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Quotes);

curriculum/front-end-development-libraries/random-quote-machine/src/index.css

@@ -0,0 +1,30 @@
+body {
+  margin: 0;
+  padding: 0;
+
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    "Roboto",
+    "Oxygen",
+    "Ubuntu",
+    "Cantarell",
+    "Fira Sans",
+    "Droid Sans",
+    "Helvetica Neue",
+    sans-serif;
+
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+code {
+  font-family:
+    source-code-pro,
+    Menlo,
+    Monaco,
+    Consolas,
+    "Courier New",
+    monospace;
+}

curriculum/front-end-development-libraries/random-quote-machine/src/index.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import './index.css';
+import App from './App';
+
+ReactDOM.render(<App />, document.getElementById('root'));

curriculum/front-end-development-libraries/random-quote-machine/src/redux/actions.js

@@ -0,0 +1,38 @@
+import * as ActionTypes from "./types";
+
+const api = "https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json";
+
+export const generateRequest = () => ({
+  type: ActionTypes.GENERATE_REQUEST,
+});
+
+export const generateSuccess = (payload) => ({
+  type: ActionTypes.GENERATE_SUCCESS,
+  payload,
+});
+
+export const generateError = () => ({
+  type: ActionTypes.GENERATE_ERROR,
+});
+
+export function generateRandomQuote() {
+  return (dispatch) => {
+    dispatch(generateRequest());
+
+    return generateRandomQuoteAfterClick().then((response) => {
+      if (response.status === 200) {
+        return response.json()
+          .then((data) => {
+            dispatch(generateSuccess(data));
+          })
+      } else {
+        dispatch(generateError());
+      }
+    })
+  }
+}
+
+export function generateRandomQuoteAfterClick() {
+  return fetch(api)
+    .then(response => response);
+}

curriculum/front-end-development-libraries/random-quote-machine/src/redux/reducer.js

@@ -0,0 +1,23 @@
+import * as ActionTypes from './types';
+
+export const randomQuotes = (
+  state = { errMess: null, quotes: [] },
+  action
+) => {
+  switch (action.type) {
+    case ActionTypes.GENERATE_REQUEST:
+      return state;
+
+    case ActionTypes.GENERATE_SUCCESS:
+      let randomNumber = Math.floor(Math.random() * (action.payload.quotes.length - 0) + 0);
+
+      return {
+        ...state,
+        errMess: null,
+        quotes: action.payload.quotes[randomNumber]
+      };
+
+    default:
+      return state;
+  }
+};

curriculum/front-end-development-libraries/random-quote-machine/src/redux/store.js

@@ -0,0 +1,15 @@
+import thunk from 'redux-thunk';
+import logger from 'redux-logger';
+import { createStore, applyMiddleware } from 'redux';
+
+import { randomQuotes } from './reducer';
+
+export const ConfigureStore = () => {
+  const store = createStore(
+    randomQuotes,
+    applyMiddleware(thunk, logger)
+  );
+
+  return store;
+}
+

curriculum/front-end-development-libraries/random-quote-machine/src/redux/types.js

@@ -0,0 +1,4 @@
+export const GENERATE_ERROR = "GENERATE_ERROR";
+export const GENERATE_SUCCESS = "GENERATE_SUCCESS";
+export const GENERATE_REQUEST = "GENERATE_REQUEST";
+export const GENERATE_RANDOM_QUOTE = "GENERATE_RANDOM_QUOTE";

curriculum/javascript-algorithms-and-data-structures/cash-register/index.js

@@ -0,0 +1,75 @@
+function checkCashRegister(price, cash, cid) {
+  let changeUnits = [0, 0, 0, 0, 0, 0, 0, 0, 0];
+  let cashObj = { status: "", change: [] };
+  let numChange = cash - price;
+
+  const moneyValues = {
+    0: 0.01,
+    1: 0.05,
+    2: 0.1,
+    3: 0.25,
+    4: 1,
+    5: 5,
+    6: 10,
+    7: 20,
+    8: 100
+  }
+
+  let totalCash = cid.reduce((acc, item) => (acc + item[1]), 0);
+  totalCash = roundToTwo(totalCash);
+
+  if (totalCash < numChange) {
+    cashObj.status = "INSUFFICIENT_FUNDS";
+    return cashObj;
+  }
+
+  if (totalCash == numChange) cashObj.status = "CLOSED";
+  if (totalCash > numChange) cashObj.status = "OPEN";
+
+  let cidUnits = cid.map((item, i) => Math.ceil(item[1] / moneyValues[i]));
+
+  for (let i = cid.length; i >= 0; i--) {
+    while (moneyValues[i] <= numChange && cidUnits[i] != 0) {
+      changeUnits[i]++;
+      cidUnits[i]--;
+      numChange = roundToTwo(numChange - moneyValues[i]);
+      if (numChange == 0) break;
+    }
+
+    if (numChange == 0) break;
+  }
+
+  if (numChange != 0) {
+    cashObj.status = "INSUFFICIENT_FUNDS";
+    return cashObj;
+  }
+
+  for (let i = cid.length - 1; i >= 0; i--) {
+    if (changeUnits[i] != 0) cid[i][1] = changeUnits[i] * moneyValues[i];
+    else if (cashObj.status != "CLOSED") cid.splice(i, 1);
+  }
+
+  if (cashObj.status != "CLOSED") cashObj.change = cid.reverse();
+  else cashObj.change = cid;
+  return cashObj;
+}
+
+function roundToTwo(num) {
+  return +(Math.round(num + "e+2") + "e-2");
+}
+
+console.log(checkCashRegister(
+  19.5,
+  20,
+  [
+    ["PENNY", 0.5],
+    ["NICKEL", 0],
+    ["DIME", 0],
+    ["QUARTER", 0],
+    ["ONE", 0],
+    ["FIVE", 0],
+    ["TEN", 0],
+    ["TWENTY", 0],
+    ["ONE HUNDRED", 0]
+  ]
+));

curriculum/javascript-algorithms-and-data-structures/telephone-number-validator/index.js

@@ -0,0 +1,7 @@
+function telephoneCheck(str) {
+	let numExpression = /^([1]{1}\s*)*(\([0-9]{3}\)\s*|[0-9]{3}\s*|[0-9]{3}\-)([0-9]{3}\s*|[0-9]{3}-)[0-9]{4}$/;
+	if (numExpression.test(str) === true) return true
+	else return false;
+}
+
+console.log(telephoneCheck("1 555 555 5555"));