├── CODALPHA
├── INDEX.HTML
├── SCRIPT.JS
└── STYLES.CSS
└── SOCIAL DASHBOARD
├── index.html
├── script.js
└── styles.css
/CODALPHA/INDEX.HTML:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Recipe Book
7 |
8 |
9 |
10 |
11 | Recipe Book
12 |
19 |
20 |
21 |
22 |
23 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/CODALPHA/SCRIPT.JS:
--------------------------------------------------------------------------------
1 | // Example JavaScript code
2 | document.addEventListener("DOMContentLoaded", function() {
3 | // Add JavaScript interactions here
4 | });
5 |
--------------------------------------------------------------------------------
/CODALPHA/STYLES.CSS:
--------------------------------------------------------------------------------
1 | /* Basic styling */
2 | body {
3 | font-family: Arial, sans-serif;
4 | margin: 0;
5 | padding: 0;
6 | }
7 |
8 | header, footer {
9 | background-color: #333;
10 | color: #fff;
11 | padding: 1rem;
12 | }
13 |
14 | nav ul {
15 | list-style-type: none;
16 | padding: 0;
17 | }
18 |
19 | nav ul li {
20 | display: inline;
21 | margin-right: 1rem;
22 | }
23 |
24 | /* Add more CSS styles as needed */
25 |
26 |
--------------------------------------------------------------------------------
/SOCIAL DASHBOARD/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Social Media Dashboard
7 |
8 |
9 |
10 |
11 | Social Media Dashboard
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/SOCIAL DASHBOARD/script.js:
--------------------------------------------------------------------------------
1 | // Example JavaScript code
2 | document.addEventListener("DOMContentLoaded", function() {
3 | const loginBtn = document.getElementById("loginBtn");
4 | loginBtn.addEventListener("click", () => {
5 | // Mock login functionality
6 | alert("Logging in...");
7 | // Assuming the user is logged in, fetch and display social media feeds
8 | displayFeeds();
9 | });
10 | });
11 |
12 | function displayFeeds() {
13 | const feedsContainer = document.getElementById("feeds");
14 | feedsContainer.innerHTML = "";
15 |
16 | // Dummy data for demonstration
17 | const socialMediaFeeds = [
18 | { platform: "Twitter", content: "Tweet 1" },
19 | { platform: "Facebook", content: "Facebook post 1" },
20 | { platform: "Instagram", content: "Instagram post 1" }
21 | // Add more dummy data for other social media platforms
22 | ];
23 |
24 | socialMediaFeeds.forEach(feed => {
25 | const feedElement = document.createElement("div");
26 | feedElement.classList.add("feed");
27 | feedElement.innerHTML = `${feed.platform}
${feed.content}
`;
28 | feedsContainer.appendChild(feedElement);
29 | });
30 | }
31 |
--------------------------------------------------------------------------------
/SOCIAL DASHBOARD/styles.css:
--------------------------------------------------------------------------------
1 | /* Basic styling */
2 | body {
3 | font-family: Arial, sans-serif;
4 | margin: 0;
5 | padding: 0;
6 | }
7 |
8 | header {
9 | background-color: #333;
10 | color: #fff;
11 | padding: 1rem;
12 | display: flex;
13 | justify-content: space-between;
14 | align-items: center;
15 | }
16 |
17 | main {
18 | padding: 1rem;
19 | }
20 |
21 | #feeds {
22 | display: grid;
23 | grid-template-columns: repeat(3, 1fr);
24 | grid-gap: 1rem;
25 | }
26 |
27 | .feed {
28 | border: 1px solid #ccc;
29 | padding: 1rem;
30 | border-radius: 5px;
31 | background-color: #f9f9f9;
32 | }
33 |
34 | /* Add more CSS styles as needed */
35 |
--------------------------------------------------------------------------------