This project is designed to help create professional README.md files with descriptions of projects or courses from freeCodeCamp. The project is created for the automation of freeCodeCamp projects and courses, specifically the formatting of the README.md file on the course's main page, as well as the creation of a README.md file for each lesson. All of this is done in an automated format as you progress through the course, and the git hooks pre-commit script is triggered with each commit after completing a lesson.
The "Manager_Projects__freeCodeCamp" project is connected to the course repository as a submodule.
- Automated creation of README.md files for each lesson in a course
- Formatting of the README.md file on the course's main page
- Integration with git hooks to trigger the script on each commit after completing a lesson
- Submodule integration with the course repository
To use the "Manager_Projects__freeCodeCamp" project, follow these steps:
- Clone the course repository and the "Manager_Projects__freeCodeCamp" project as a submodule.
- Set up the git hooks to trigger the script on each commit after completing a lesson.
- As you progress through the course, the script will automatically create and format the README.md files for each lesson and the course's main page.
If you would like to contribute to the "Manager_Projects__freeCodeCamp" project, please feel free to submit a pull request or open an issue.
This project is licensed under the MIT License.
| JavaScript | CSS | HTML5 |
|---|---|---|
 |  |  |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>Calorie Counter</title>
</head>
<body>
<main>
<h1>Calorie Counter</h1>
<div class="container">
<form id="calorie-counter">
<label for="budget">Budget</label>
<input
type="number"
min="0"
id="budget"
placeholder="Daily calorie budget"
required
/>
<fieldset id="breakfast">
<legend>Breakfast</legend>
<div class="input-container"></div>
</fieldset>
<fieldset id="lunch">
<legend>Lunch</legend>
<div class="input-container"></div>
</fieldset>
<fieldset id="dinner">
<legend>Dinner</legend>
<div class="input-container"></div>
</fieldset>
<fieldset id="snacks">
<legend>Snacks</legend>
<div class="input-container"></div>
</fieldset>
<fieldset id="exercise">
<legend>Exercise</legend>
<div class="input-container"></div>
</fieldset>
<div class="controls">
<span>
<label for="entry-dropdown">Add food or exercise:</label>
<select id="entry-dropdown" name="options">
<option value="breakfast" selected>Breakfast</option>
<option value="lunch">Lunch</option>
<option value="dinner">Dinner</option>
<option value="snacks">Snacks</option>
<option value="exercise">Exercise</option>
</select>
<button type="button" id="add-entry">Add Entry</button>
</span>
</div>
<div>
<button type="submit">Calculate Remaining Calories</button>
<button type="button" id="clear">Clear</button>
</div>
</form>
<div id="output" class="output hide"></div>
</div>
</main>
<script src="./script.js"></script>
</body>
</html>"use strict";
const cleanInputString = (str) => {
const regex = /[+-\s]/g;
return str.replace(regex, "");
};
const isInvalidInput = (str) => {
const regex = /e/;
};:root {
--light-grey: #f5f6f7;
--dark-blue: #0a0a23;
--fcc-blue: #1b1b32;
--light-yellow: #fecc4c;
--dark-yellow: #feac32;
--light-pink: #ffadad;
--dark-red: #850000;
--light-green: #acd157;
}
body {
font-family: "Lato", Helvetica, Arial, sans-serif;
font-size: 18px;
background-color: var(--fcc-blue);
color: var(--light-grey);
}
h1 {
text-align: center;
}
.container {
width: 90%;
max-width: 680px;
}
h1,
.container,
.output {
margin: 20px auto;
}
label,
legend {
font-weight: bold;
}
.input-container {
display: flex;
flex-direction: column;
}
button {
cursor: pointer;
text-decoration: none;
background-color: var(--light-yellow);
border: 2px solid var(--dark-yellow);
}
button,
input,
select {
min-height: 24px;
color: var(--dark-blue);
}
fieldset,
label,
button,
input,
select {
margin-bottom: 10px;
}
.output {
border: 2px solid var(--light-grey);
padding: 10px;
text-align: center;
}
.hide {
display: none;
}
.output span {
font-weight: bold;
font-size: 1.2em;
}
.surplus {
color: var(--light-pink);
}
.deficit {
color: var(--light-green);
}