Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Development Tools

Posted by Jeff Ward
Jeff Ward
8,978 Points

NEWBIE! - Text Editor / Runner for Mac | Which one?

I am sorry if this is a newbie question but I cannot find anything that does what I want to do.

I am looking for a text editor where I can open and edit HTML/CSS and Javascript files, and then 'run' the files so I can see the code in action. For example, I have some code for a browser app that converts the input text, to uppercase/lowercase and then outputs the text on the page.

Currently I am using TeamTreehouses workspaces as a text editor/executor and it doesn't run the code properly.

Any suggestions of other software that I can write code in, and then run it and see it in action? Thanks!!!

Here is the code I would like to run, but it is not running properly in Treehouse Workspaces :(

HTML:

<!DOCTYPE html>
<html>
  <head>
    <!-- My CSS stylesheet link  -->
  <link rel="stylesheet" href="css/main.css">
 <title> Case Changer</title>
  </head>
  <!-- Header Area  -->
<header>
  <div>
    <h1>Text Case Changer </h1>
    <h2>By: Jeff Ward</h2>
    <h3>Choose your Conversion method</h3>
  </div>
</header>
<body>
<form action="">
    <input id="lowerCase" type="radio" name="case" value="lowerCase" checked='checked' />Lower Case
    <br />
    <input id="upperCase" type="radio" name="case" value="upperCase" />Upper Case
    <br />
    <br />
    <textarea id="inputText" name="input" form="inputText">Enter text here to be Converted...</textarea>
    <br />
    <textarea id="outputText" name="output" form="outputText">Converted text will appear here...</textarea>
    <br />
    <input type="submit" value="Convert!" onclick="convert()" />
</form>

    <script src="script.js"></script>
  </body>
</html>

JavaScript:

function convert() {
    var convertedText = document.getElementById("inputText").value;
    var checkedValue = document.querySelector('input[name="case"]:checked').value;
    convertedText = checkedValue == 'lowerCase'
        ? convertedText.toLowerCase()
        : convertedText.toUpperCase()
    document.getElementById('outputText').value = convertedText;
}

5 Answers

Abe Layee
Abe Layee
8,378 Points
Abe Layee
Abe Layee
8,378 Points

Try Brackets,sublime text, and Netbeans. They are all good . I use sublime text mostly. Brackets website http://brackets.io/ sublime text http://www.sublimetext.com/ Netbeans https://netbeans.org/

Jeff Ward
Jeff Ward
8,978 Points

Will Sublime allow me to 'run' code to see what it would like like in a live scenario?

Jarrett Young
Jarrett Young
12,635 Points
Jarrett Young
Jarrett Young
12,635 Points

Yes, I use Sublime Text 2 and it allows me to preview. in the html file, right-click and choose "Open in Browser"

Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,242 Points
Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

There's also Atom, which is made by Github and has many, many addons made by the community. It's also free.

Abe Layee
Abe Layee
8,378 Points
Abe Layee
Abe Layee
8,378 Points

Thank for sharing Ryan Field. I like it. I have a question how do I preview my code in the broswer?

Ryan Field
Ryan Field
Courses Plus Student 21,242 Points
Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

No problem! There's a preview addon you can get if you search in the packages, otherwise you can preview your code by just opening the html file in a browser window and refreshing after you save. It's not as robust as some IDEs, but I think it's a really nice text editor nonetheless.

Abe Layee
Abe Layee
8,378 Points
Abe Layee
Abe Layee
8,378 Points

ok, thank again.

Abe Layee
Abe Layee
8,378 Points
Abe Layee
Abe Layee
8,378 Points

I think so man or try dreamweaver but is not free though. Brackets is perfect. give a try

Jeff Ward
Jeff Ward
8,978 Points

Ok I will look into brackets!! Thank you!

miikis
miikis
44,957 Points
miikis
miikis
44,957 Points

Try Coda 2 man. There's a 30-Day trial. It's like a light IDE and does the LivePreview really easily. Try it.