Help With my Whole code in Index.html

Get Help Angular.js
#1

<PLEASE USE THE FOLLOWING TEMPLATE TO HELP YOU CREATE A GREAT POST!>

Hi. I’m in need help. My code seems to be correct according to Codecademy, but it wouldn’t be correct because the website turned out to be completely messed up. The images are scattered everywhere and there are tiny bits of image pieces in some spaces in the website. Here is my code:

<Below this line, add a link to the EXACT exercise that you are stuck at.>

<!doctype html>
<html>
  <head>
    <link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
    <link href="css/main.css" rel="stylesheet" />

    <!-- Include the AngularJS library -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
  </head>
  <body ng-app="AppMarketApp">
    <div class="header">
      <div class="container">
        <h1>App Market</h1>
      </div>
    </div>

    <div class="main" ng-controller="MainController">
      <div class="container">
         <div class="card">
           <app-info info="move"></app-info>
        </div>
          <img class="icon" ng-src="{{ move.icon }}">
          <h2 class="title">{{ move.title }}</h2>
          <p class="developer">{{ move.developer }}</p>
          <p class="price">{{ move.price | currency }}</p>
        </div>
      <div class="card">
        <app-info info="forecast"></app-info>
        <app-info info="gameboard"></app-info>
      </div>
      
      </div>
        <div class="card">
                  <app-info info="shutterbugg"></app-info>
        
         </div>
          <img class="icon" ng-src="{{ shutterbugg.icon }}">
          <h2 class="title">{{ shutterbugg.title }}</h2>
          <p class="developer">{{ shutterbugg.developer }}</p>
    <p class="price">{{ shutterbugg.price | currency }}</p>
        

        <div class="card">
     


          <app-info info="gameboard">         <img class="icon" ng-src="{{ gameboard.icon }}">
          <h2 class="title">{{ gameboard.title }}</h2>
          <p class="developer">{{ gameboard.developer }}</p>
          <p class="price">{{ gameboard.price | currency }}</p></app-info>


         </div>




    <!-- Modules -->
    <script src="js/app.js"></script>

    <!-- Controllers -->
    <script src="js/controllers/MainController.js">
      
    
    </script>

    <!-- Directives --> 
    <script src="js/directives/appInfo.js">
    </script>

  </body>
</html>

<In what way does your code behave incorrectly? Include ALL error messages.>
Codecademy did not recognize the errors. This is the index.html by the way. Thanks! :smile:

#2

This is an important part of any question since it helps us review the lesson and test your code.

2 Likes
#3

This is the link: https://www.codecademy.com/courses/learn-angularjs/lessons/directives/exercises/directives-built-in-and-custom-directives?action=lesson_resume. I can finish the lesson actually. Its just weird that if you see my website the one I’ve done it will look like a messed up scrambled image website with the price on the left and a half part of the image at the top. I think its a typo or error I’ve made while busy doing the exercises, so please help me identify if there are any silly mistakes or typos that I’ve made in that code i send you. Thanks :smile:

#4

This HTML needs to be made into the template file, appInfo.html. It should look something like this when you’ve moved it.

appInfo.html 
<img class="icon" ng-src="{{ info.icon }}"> 
<h2 class="title">{{ info.title }}</h2> 
<p class="developer">{{ info.developer }}</p> 
<p class="price">{{ info.price | currency }}</p>

Have you created the directives file, appInfo.js? What does it look like?

Please let us have a look at your main controller file, as well. Thanks.

1 Like
#5

don’t think I’ve come to that lesson yet. I don’t have any HTML files except index.html. Can you tell me when I’ll come to that session? Thanks :slight_smile:

#6

Your link above took me to lesson 4. Is that the one you are on?

1 Like
#7

Yes. Lesson 4 if I’m not correct is also known as: Built-in and Custom Directives

#8

Okay, this lesson gets into creating a singular directive that will involve replacing code in the main controller, the index.html file, and writing the directive and template file. go through the steps carefully.

1 Like
#9

Ok, Thank you :smile:

1 Like
#10

For step two, just copy the two objects you have, and change their names and titles.

__MOVE__
__Shutterbug__

ir some such. You can still use the same images.

1 Like
#11

Got it. Here are my new objects. This is my new code from Main Controller.js:
{
icon: ‘img/transformice.jpg’,
title: ‘Transformice’,
developer: ‘Atelier 801’,
price: 1.89
},
{
icon: ‘img/shadow-the-hedgehog.jpg’,
title: ‘Sonic Dash 2’,
developer: ‘Sonic Studios’,
price: 1.00
}
Thank you :smiley:

#12

Can you upload your two images in a post, please? Thanks.

1 Like
#13

Here is an image of my website. These images should be together but they are split for some really odd reason.
They’re in pieces. It doesn’t make sense:
move (2)
move (2)
Thank you :slight_smile:

#14

They are actually same images. But for some reason in my website the images are duplicated and only half of them are shown. Its so messed up.

#15

I only needed one image which is a perfect looking move image. I added the right code (Codecademy didn’t recognize any errors). Instead the price is on the left, a duplicate of that image at the top, and the real image is on the right (that’s the only organized image out of the others)

#16

This is scaled down from 1879 X 744…

MOVE_SHUTTERBUG
MOVE_SHUTTERBUG720×285 157 KB

2 Likes
#17

I got it. Thanks! My website actually became organized and proper now! :smiley: Thank you so much for helping me!

2 Likes
#18

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.