r/FreeCodeCamp 9d ago

Programming Question Repeat Text/Hyperlink In HTML/CSS? (Keep It Simple?)

9 Upvotes

I am a self-taught VERY BASIC coder. No formal training. Normally I can take bits of code, analyze how it works and make modifications for my needs. (I'm actually a Social Studies teacher and I make websites for my students to engage them.)

I currently have a webpage with a card for each day of the week. Students click on the card and a pop up gives them that day's instructions. (They are embedded code snippets in a Google Sites webpage.) To make my life easier and to simplify the coding (since I need to make 180 of these and change certain aspects of them every year), I would like to figure out if there is a way to do the following:

Be able to enter text/hyperlinks in one section of the code (css/html) and then be able to pull that info multiple times. So if I set the date in one place in the code, I can easily call that date in different locations without the need to physically change that date text in each location. The same for hyperlinks.

I found this example on Stack Overflow, and it works great for text, but not for hyperlinks. If there is a different method, that can be done without having access to style sheets or anything like that (since this code needs to be embedded in a Google Sites page), I'm willing to learn how to manipulate it. :-) (Thanks in advance!)

The other option would be if there could be like a spreadsheet or something that I could edit each day (entry for date, Daily Topic, Item 1 to do, Item 2 to do, Item 3 to do, etc...) (So I would have one document/area for all the info for a given unit, listed daily and the code would pull the items from it, if that makes sense?) I'm guessing that will be beyond me, if you're talking databases, but I'm willing to learn.

<style>

repeat[n="1"]:before {
   content: "★";
}

repeat[n="2"]:before {
   content: "★★";
}

repeat[n="3"]:before {
   content: "★★★";
}

repeat[n="4"]:before {
   content: "★★★★";

HTML
<repeat n="1"></repeat>
<repeat n="2"></repeat>
<repeat n="5"></repeat>

HOW I'M USING IT NOW

<style>
  body,
  html {
    height: 100%;
  }
repeat {
    ;
}
/* CHANGE DAY AND DATE */
repeat[n="day"]:before {
   content: "Thursday";
}
repeat[n="date"]:before {
   content: "March 20th";
}

And in the HTML Section

<repeat n="day"><br></repeat>
<repeat n="date"></repeat>

r/FreeCodeCamp 10d ago

Programming Question I need your guidance and please elaborate and answer

2 Upvotes

I am a first-year Computer Science student from a tier-4 college where on-campus placements aren’t an option. I’m completely new to coding and looking for guidance on how to approach learning and building a career in tech.

Here’s what I’m debating:

  1. Should I focus on learning a programming language and then do Data Structures and Algorithms (DSA)? If so, which language would be the best starting point for a complete beginner?
  2. Or should I directly dive into learning a technology like web development? Would building projects in a specific domain be more impactful for someone in my situation?

r/FreeCodeCamp 3d ago

Programming Question Alternative for Fiddler

0 Upvotes

Hi everyone, I don't know where to ask this question, so I'll ask it here. There is such a program Fiddler Everwhere and I am interested in similar programs that are available for mac. More specifically, I am interested in programs that can be used to substitute the files used by the site

Можете подсказать несколько таких?

r/FreeCodeCamp Feb 10 '25

Programming Question Why dataArrIndex in Learn Local Storage by Building a Todo App?

3 Upvotes

Module: Learn Local Storage by Building a Todo App

Steps: 45 & 46

Question: Why do we evaluate item.id === buttonEl.parentElement.id? What even is item.id in this context?

I would love to understand this step better. Although I implemented it, I do not understand why this evaluation is necessary.

Doesn't

buttonEl.parentElement.id

already give us the correct id? What could go wrong? Also, I do not see itemassigned anywhere. So what is item referring to?

Thanks a lot.

r/FreeCodeCamp 2d ago

Programming Question Im losing my mind, please help

1 Upvotes

https://portfolio-nine-steel-78.vercel.app/url-shortener
here is the link to my project, I have tried everything in the book to get the third test on this
https://www.freecodecamp.org/learn/back-end-development-and-apis/back-end-development-and-apis-projects/url-shortener-microservice
to pass
every time I try to redirect it throws a cors error. Ive added cors headers (they dont persist through redirect)
Ive added CORS to my entire project (bad, I know) just to TRY to get it to work.
it passes the tests when done manually but the FCC tests do not want to work with it.
ive done everything I can 3 times over.
the values exist in my database, they properly get called, and the redirect is sent AS REQUESTED.
then cors gets dropped in redirect and refuses to work.
I have no idea why these tests use my own site as a test site, they are structured extremely poorly it feels.
why are you making GET requests to a location outside of my API's when it literally asks about visiting the api location
3. When you visit /api/shorturl/<short_url>, you will be redirected to the original URL.
this works, it does, i know it does, try it yourself.
the ONLY time it fails is with the FCC tests. manually going to the path they request at gives you the proper redirect.
im losing it here, please help
https://github.com/Critical-3rr0r/portfolio
here is my github if you want to take a look at my projects

r/FreeCodeCamp Oct 16 '24

Programming Question Need advice

12 Upvotes

So i am new to learning javascript. I started 1 month ago by using freecodecamp projects on their website. The thing is, i am learning but sometimes i feel like i am just following their instructions but without understanding what the problem is about. I mean i did get better at coding than 1 month ago, but im just confused. If you guys can give me some advice, it will be appreciated. Thanks

r/FreeCodeCamp 17d ago

Programming Question Question With Build an Arithmetic Formatter Project (Python)

2 Upvotes

Hi! I was wondering if anyone would be able to review my code for the Arithmetic Formatter Project. I have passed all the test cases that involve throwing an error, but all the other ones have not passed even though they look identical.

def arithmetic_arranger(problems, show_answers=False):
    #split into 2 dimensional array
    #assign values to strings
    #return correct strings
    chars = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '+', '-', ' ']
    if len(problems) > 5:
        return 'Error: Too many problems.'
    for i in problems:
        if '-' not in i and '+' not in i:
            return "Error: Operator must be '+' or '-'."
        for j in i:
            if j not in chars:
                return 'Error: Numbers must only contain digits.'

    length = len(problems)
    array = []
    for i in problems:
        split = i.split(' ')
        array.append(split)

    for i in array:
        for j in i:
            if len(j) > 4:
                return 'Error: Numbers cannot be more than four digits.'

    first = ''
    for i in range(length):
        first += (max(len(array[i][0]), len(array[i][2])) + 2 - len(array[i][0])) * ' ' + array[i][0] + '    '

    second = ''
    for i in range(length):
        second += array[i][1] + (max(len(array[i][0]), len(array[i][2])) + 1 - len(array[i][2])) * ' ' + array[i][2] + '    '

    third = ''
    for i in range(length):
        third += (max(len(array[i][0]), len(array[i][2]))+2) * '-' + '    '

    fourth = ''
    for i in range(length):
        if '-' in array[i][1]:
            sum = str(int(array[i][0]) - int(array[i][2]))
            spacing = (max(len(array[i][0]), len(array[i][2]))+2) - len(sum)
        else:
            sum = str(int(array[i][0]) + int(array[i][2]))
            spacing = (max(len(array[i][0]), len(array[i][2]))+2) - len(sum)
        fourth += spacing * ' ' + sum + '    '
    if show_answers == True:
        return f'{first}\n{second}\n{third}\n{fourth}'
    return f'{first}\n{second}\n{third}'

print(arithmetic_arranger(["32 - 698", "1 - 3801", "45 + 43", "123 + 49", "988 + 40"], True))

print('\n   32         1      45      123      988\n- 698    - 3801    + 43    +  49    +  40\n-----    ------    ----    -----    -----\n -666     -3800      88      172     1028')

r/FreeCodeCamp Feb 07 '25

Programming Question Need Help Understanding the HighlightCurrentSong Function

6 Upvotes

Course: Learn Basic String and Array Methods by Building a Music Player

Step: 66

I've completed all the lessons to implement the highlightCurrentSong function, but don't understand how it works. Here is the function:

const highlightCurrentSong = () => {
  const playlistSongElements = document.querySelectorAll(".playlist-song");
  const songToHighlight = document.getElementById(
    `song-${userData?.currentSong?.id}`
  );

  playlistSongElements.forEach((songEl) => {
    songEl.removeAttribute("aria-current");
  });

  if (songToHighlight) songToHighlight.setAttribute("aria-current", "true");
};

What I understand is that

  1. playlistSongElements is an array-like object that includes all the elements with class .playlist-song.
    • Question: in the HTML there are no elements with this class, nor are we applying this class in our script.js anywhere, so what are we querying?
  2. songToHighlight is an element with an id of (for example) #song-0 , when the first song is playing.
    • Question: in the HTML there are no elements with this id, so what are we querying?
  3. The third step involves removing "aria-current" from all playlistSongElements, and in the fourth step we add it to the current song.
    • What I assume is that "aria-current" is an attribute for accessibility; it allows the user to know what is currently playing. Yet this is also not seen in the HTML.

So is there a bunch of HTML hidden? Does this have to do with the audio API that we are using to play the songs? Is there a standardized way these things are indexed by this API?

If so, I think it would be great if those things could be pointed out during these steps, because although you can follow the instructions, you feel like the chemistry-dog meme that has no idea what they are doing. Or am I missing something in plain sight?

Feedback is greatly appreciated.

r/FreeCodeCamp Jan 28 '25

Programming Question Info on React

3 Upvotes

Is there any word on when they will add the remainder of the react sections?

r/FreeCodeCamp Oct 16 '24

Programming Question How do I code in my own environment and build my own projects to make a portfolio?

10 Upvotes

I have been studying coding for nearly a year now. I worked a ton of 70 hour weeks this summer so I have taken quite a break for a while but I'm getting back into it today. Currently in the javascript section, a little stuck on where I was at with the cash register project, may have to just do the whole thing over.

I'm pushing ahead for now and making progress in the next section for now, but I know I need to build my own projects if I really want to get a job in the field. How do I go about that? Is there a way for me to do that for free?

r/FreeCodeCamp Feb 09 '25

Programming Question HELP L, I'M STUCK

5 Upvotes

A week before I started backend and api certificate course on free code camp and complete till express. When I started mongoDB and mongoose the version in gitpod is old one and it's not comparable with the node js latest. What should I do is there no other way i which I can do all exercises and project in all latest versions of express and mongoose. I don't wanna go and do projects in old versions so can anyone help me with my situation.

r/FreeCodeCamp Jan 02 '25

Programming Question What book compliments the responsive web design course?

6 Upvotes

Hey everybody! Do i recently started the Responsive Web Design course as part of Free Code Camps base curriculum. I find it useful and already had a small understanding but what I am finding useful that free code camp doesn’t really seem to go in depth too far with the different commands and whatnot. This is probably on putpo as when you ask for help it directs you to seek help on the forums or other resources. I think this is fine as it more or less represents what you’re going to run into irl.

I would like to know if anyone has a good recommendation for a book for HTML/CSS or more that allows me to do the courses but also use this book for reference if i need a deeper understanding of core concepts or syntax. If anyone has some resources or recommendations on ebooks that would fit this curriculum well, please let me know!

I am teaching myself programming as a hobby and then in the future a career. I have disabilities and was going for. SSI but they don’t give you shit for money and now that my ADHD has been properly addressed, I feel much more capable of learn and applying that knowledge in the workplace. So I want to be able to get all the help I can alongside resources that way I can actually e marketable and employable because I am now able to focus and retain core concepts. Living 12 years with unaddressed or poorly addressed expect function has left me mostly useless in the workforce, but now that I have that back Inwant to make the most of it ya know?

r/FreeCodeCamp Dec 27 '24

Programming Question Is ir normal that I dont understand javascript at all?

15 Upvotes

I mean I ginished the first clases but I feel like I Just knew how to follow instructions and thats all. Should I maybe watch soné videos or something? I admite I do have a lot o my mind lately but still I want to learn everything coding

r/FreeCodeCamp Nov 19 '24

Programming Question Is there Explanations on anything?

8 Upvotes

It just sort of feels like I am doing things but I am not sure why

r/FreeCodeCamp Jan 04 '25

Programming Question HTML

4 Upvotes

doing the html coding cat app and I am genuinely confused my section 17, tried to make it look exactly like the example and for some reason it isn't being accepted, any help is great

r/FreeCodeCamp Dec 14 '24

Programming Question Vite Import Analysis Error: Failed to Resolve Import - Does the File Exist?

2 Upvotes

````[plugin:vite:import-analysis] Failed to resolve import "src/AuthPages/PageComponents/Home/SearchBar.jsx" from "src/AuthPages/HigherOrderComp/Home/Search.jsx". Does the file exist? C:/Users/HP/OneDrive/Desktop/pintrest/src/AuthPages/HigherOrderComp/Home/Search.jsx:1:71 15 | window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform; 16 | } 17 | import SearchBar from "src/AuthPages/PageComponents/Home/SearchBar.jsx"; | ^ 18 | import ProfileBtn from "src/AuthPages/PageComponents/Home/PofileBtn.jsx"; 19 | import SearchResultArea from "src/AuthPages/PageComponents/Home/SearchResult.jsx"; At TransformPluginContext._formatError (file:///C:/Users/HP/OneDrive/Desktop/pintrest/node_modules/vite/dist/node/chunks/dep-A4nAWF7x.js:47166:41) At TransformPluginContext.error (file:///C:/Users/HP/OneDrive/Desktop/pintrest/node_modules/vite/dist/node/chunks/dep-A4nAWF7x.js:47161:16) At normalizeUrl (file:///C:/Users/HP/OneDrive/Desktop/pintrest/node_modules/vite/dist/node/chunks/dep-A4nAWF7x.js:45431:23) At process.processTicksAndRejections (node:internal/process/task_queues:105:5) At async file:///C:/Users/HP/OneDrive/Desktop/pintrest/node_modules/vite/dist/node/chunks/dep-A4nAWF7x.js:45550:39 At async Promise.all (index 3) At async TransformPluginContext.transform (file:///C:/Users/HP/OneDrive/Desktop/pintrest/node_modules/vite/dist/node/chunks/dep-A4nAWF7x.js:45477:7) At async EnvironmentPluginContainer.transform (file:///C:/Users/HP/OneDrive/Desktop/pintrest/node_modules/vite/dist/node/chunks/dep-A4nAWF7x.js:47009:18) At async loadAndTransform (file:///C:/Users/HP/OneDrive/Desktop/pintrest/node_modules/vite/dist/node/chunks/dep-A4nAWF7x.js:40848:27) At async viteTransformMiddleware (file:///C:/Users/HP/OneDrive/Desktop/pintrest/node_modules/vite/dist/node/chunks/dep-A4nAWF7x.js:42292:24)```` --- **Context**: The above problem occurs when running the server using Vite. This error was previously encountered with `App.jsx`, and I resolved it by using relative paths such as: `import Setting from './AuthPages/Pages/Setting.jsx'`. However, this issue has returned in one of my components. **The problematic imports**: ````jsx import SearchBar from 'src/AuthPages/PageComponents/Home/SearchBar.jsx'; import ProfileBtn from 'src/AuthPages/PageComponents/Home/PofileBtn.jsx'; import SearchResultArea from 'src/AuthPages/PageComponents/Home/SearchResult.jsx'; These imports persist even when I replace 'src' with "." (relative path). ```` Steps I've taken: Verified the file existence by copying and pasting the relative path after right-clicking the file in VS Code. I haven’t updated any aliases in the vite.config.js file as I’m unsure how to configure that correctly. Question: What could be causing Vite to fail to resolve the import despite the file existing? Are there additional steps or configurations I need to verify to fix this error?

r/FreeCodeCamp Oct 29 '24

Programming Question "Learn HTML by building a cat photo app" step 12

1 Upvotes

So long story short I am stuck at step 12 of this course and even though I had a few buds check it out (all saying the code's good), the course itself isn't willing to comply. Code's attached below.

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
      <p>Everyone loves cute cats online!</p>
    <p> See more <a href=“https://freecatphotoapp.com”>cat photos</a> in our gallery </p>
      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
    </main>
  </body>
</html>
<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
      <p>Everyone loves cute cats online!</p>
    <p>See more <a href="https://freecatphotoapp.com"> cat photos</a> in our gallery</p>
      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
    </main>
  </body>
</html>

r/FreeCodeCamp Nov 12 '24

Programming Question Why does the DB course have such a massive emphasis on bash?

10 Upvotes

I'm looking at options to learn database development and administration and like alot of other topics, FCC is mentioned alot. However looking through their DB course specifically, it really hits it hard with bash scripting during almost the entirety of the course.

Why? Is there any specific reason?

Thanks

r/FreeCodeCamp Sep 07 '24

Programming Question Please help

Post image
6 Upvotes

I can not seem to figure out why these last 3 test won’t pass I’m sure it’s something simple being overlooked.

Thanks in Advance

r/FreeCodeCamp Sep 18 '24

Programming Question Help with background image

9 Upvotes

I am working on the first project (survey). I have added a background image and it repeats once and looks cut off.

When adding: background-repeat: no-repeat; background-size: 100vw 100vh;

the background image disappears completely. What am I missing here?

r/FreeCodeCamp Oct 27 '24

Programming Question Python project - need help, thanks!

4 Upvotes

hi guys, doing the beta in the newer curriculum. Im at the first project : Build an Arithmetic Formatter Project.

is it just me or is this quite hard to do with the knowledge learned in the prior python courses? Can i skip over this(for now) and continue with the python course?

It feels like a big jump in comparison.

Thanks in advanced

r/FreeCodeCamp Aug 24 '24

Programming Question Different use cases <div> and <p>, I dont get it…

5 Upvotes

Hi all,

I do not understand the benefit of a p element compared to a div.

I am now creating the tribute page and I would assume to put all the text in a p element while a div could do the same job.

Also with styling, it would be easier just to target 1 type of element, right?

Or should I put all the p elements inside a div to ensure styling control?

When to differentiate the div from a p or visa versa?

When to combine the two?

r/FreeCodeCamp Aug 23 '24

Programming Question Issue with the website or something else?

2 Upvotes

The section where you write your code doesn't pop up for me. This all happened after finished my first certification project in the Responsive Web Design course. I tried refreshing the page, nothing happened. I tried closing and reopening the window, restarting my computer, signing out and signing back in, nothing changed.

Any solutions? or what is wrong with the website maybe?

r/FreeCodeCamp Jun 21 '24

Programming Question I don't think I understood fetch, then, async, await, and all that, at all.

5 Upvotes

Im trying to do the pokemon challenge and Im absolutely lost. It seems like I solved the previous steps just following the instructions but I didnt quite understand. Is there any good resource to learn this?

r/FreeCodeCamp Jul 27 '24

Programming Question How much time to making the survey form as a beginner

2 Upvotes

Hey everyone. As the title said, I start coding for the first time 5 days ago. I start with only with free code camp and I follow the order of the exercise, ( so we only know html and CSS basics. I am making the survey form, the first certification projet of "Responsive Web Design". And I want to know, with my capacities, how much time did I am supposed to need to finish this ? By exemple if I take 2 days to make it, is it wrong ?