Welcome to our tutorial on Episode 324 where we will be discussing Python and JavaScript in the context of web development. Specifically, we will be focusing on building NearBeach, an open source project management tool.
To start off, we need to set up our project structure. We will create a new folder for our project and inside that folder, we will have subfolders for different components of our project such as HTML, CSS, JavaScript, and Python files.
Let’s start by creating our HTML file where we will design the user interface for our project. Open a new file in your text editor and save it as index.html inside the HTML folder of our project.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NearBeach - Project Management Tool</title>
<link rel="stylesheet" href="../css/styles.css">
</head>
<body>
<h1>Welcome to NearBeach - Your Project Management Tool</h1>
<div id="projects"></div>
<script src="../js/scripts.js"></script>
</body>
</html>In this HTML file, we have created a basic structure with a heading and a div element where we will display the list of projects. We have also linked our CSS file for styling and our JavaScript file for functionality.
Now let’s move on to creating our CSS file. Create a new file in your text editor and save it as styles.css inside the CSS folder of our project.
body {
font-family: Arial, sans-serif;
background-color: #f1f1f1;
margin: 0;
padding: 0;
}
h1 {
color: #333;
text-align: center;
}
#projects {
margin: 20px;
padding: 10px;
background-color: #fff;
border: 1px solid #ccc;
}In this CSS file, we have defined some basic styling for our project. We have set the font family, background color, margins, and padding for our elements.
Next, let’s move on to creating our JavaScript file. Create a new file in your text editor and save it as scripts.js inside the JS folder of our project.
const projects = [
{ id: 1, name: "Project 1" },
{ id: 2, name: "Project 2" },
]
const projectsElement = document.getElementById('projects');
projects.forEach(project => {
const projectElement = document.createElement('div');
projectElement.innerText = project.name;
projectsElement.appendChild(projectElement);
});In this JavaScript file, we have defined an array of projects with their id and name. We have then looped through the projects array and created a div element for each project, displaying its name inside the div element.
Finally, let’s run our project by opening the index.html file in a web browser. You should see the heading "Welcome to NearBeach – Your Project Management Tool" and a list of projects displayed on the page.
Congratulations! You have successfully built NearBeach, an open source project management tool using Python and JavaScript in web development. Feel free to customize and expand on this project to fit your needs. Happy coding!
